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 アウトラインの太さを指定する 

戻る

TOP

WEB SEARCH
MENU
CONTENTS
digilog.TOP
digilog.HTML
digilog.CSS
digilog.SEO
digilog.img