outline-style 【アウトラインの種類】
[IE5] [Fx2] [Op7]
outline-styleプロパティは、アウトラインの種類を指定する際に使用します。
borderプロパティと違って、上下左右に独立した指定をする事は出来ません。
none
アウトラインを表示しません。これが初期値です。
solid
1本の線で表示されます。
double
2本の線で表示されます。
groove
立体的に窪んだ線で表示されます。
ridge
立体的に隆起した線で表示されます。
inset
アウトラインで囲まれた領域が立体的に窪んだように表示されます。
上下左右の色加減は自動で設定されます。
outset
アウトラインで囲まれた領域が立体的に隆起したように表示されます。
上下左右の色加減は自動で設定されます。
dashed
破線で表示されます。
dotted
点線で表示されます。
outline-styleの使用例
CSSファイル
.sample001 {
outline-color: #333333;
outline-style: solid;
outline-width: 5px;
margin: 20px 10px;
}
.sample002 {
outline-color: #333333;
outline-style: double;
outline-width: 5px;
margin: 20px 10px;
}
.sample003 {
outline-color: #333333;
outline-style: groove;
outline-width: 5px;
margin: 20px 10px;
}
.sample004 {
outline-color: #333333;
outline-style: ridge;
outline-width: 5px;
margin: 20px 10px;
}
.sample005 {
outline-color: #333333;
outline-style: inset;
outline-width: 5px;
margin: 20px 10px;
}
.sample006 {
outline-color: #333333;
outline-style: outset;
outline-width: 5px;
margin: 20px 10px;
}
.sample007 {
outline-color: #333333;
outline-style: dashed;
outline-width: 5px;
margin: 20px 10px;
}
.sample008 {
outline-color: #333333;
outline-style: dotted;
outline-width: 5px;
margin: 20px 10px;
}
HTMLソース
<p class="sample001">アウトラインスタイルサンプル</p>
<p class="sample002">アウトラインスタイルサンプル</p>
<p class="sample003">アウトラインスタイルサンプル</p>
<p class="sample004">アウトラインスタイルサンプル</p>
<p class="sample005">アウトラインスタイルサンプル</p>
<p class="sample006">アウトラインスタイルサンプル</p>
<p class="sample007">アウトラインスタイルサンプル</p>
<p class="sample008">アウトラインスタイルサンプル</p>
表示すると
アウトラインスタイルサンプル
アウトラインスタイルサンプル
アウトラインスタイルサンプル
アウトラインスタイルサンプル
アウトラインスタイルサンプル
アウトラインスタイルサンプル
アウトラインスタイルサンプル
アウトラインスタイルサンプル
アウトライン関連項目
| outline | アウトラインのスタイル・太さ・色を指定する |
| outline-color | アウトラインの色を指定する |
| outline-style | アウトラインのスタイルを指定する |
| outline-width | アウトラインの太さを指定する |
