アウトラインのスタイル
(Dynamic outlines)
ユーザーインターフェイス
ホーム
>
CSS2 Note
> アウトラインのスタイル
C2- ie8-
説明
outline-style:
style
;
C2- ie8-
値:
none | dotted | dashed | solid | double | groove | ridge | inset | outset |
inherit
----- hint -----
a b この順序で
a|b どれか1つ
a||b 少なくとも1つ
[...] グループ
a* 0回以上
a+ 1回以上
a? 0回、1回
{a,b} a回以上b回以下
初期値:
none
、
適用要素:
すべて
、
継承:
しない
、
%値:
なし
、
メディア:
ビジュアル インタラクティブ
アウトラインのスタイルを指定します。outline-styleに指定できる値は、
<border-style>
と同じですが、hiddenだけは指定することができません。
使用例
button {outline-style:dashed}
アウトラインのスタイル
<border-style>
と同じ値(ただしhiddenを除く)
none
C2- ie8- ラインを消します。太さも「0」にします。初期値。
dotted
C2- ie8- ラインを点線で表示。
dashed
C2- ie8- ラインを破線で表示。
solid
C2- ie8- ラインを実線で表示。
double
C2- ie8- ラインを二重線で表示。
groove
C2- ie8- ラインが凹んで見えるように表示。
ridge
C2- ie8- ラインが突き出て見えるように表示。
inset
C2- ie8- ラインの内側全体が凹んで見えるように立体的に表示します。
outset
C2- ie8- ラインの内側全体が突き出て見えるように立体的に表示します。
アウトラインのスタイルのレンダリング
アウトラインのスタイルのレンダリング
Opera9のサンプル画像
<style type="text/css"><!--
span {outline:#0ff thick;}
.eg1 {
outline-style:none;
}
.eg2 {
outline-style:dotted;
}
.eg3 {
outline-style:dashed;
}
.eg4 {
outline-style:solid;
}
.eg5 {
outline-style:double;
}
.eg6 {
outline-style:groove;
}
.eg7 {
outline-style:ridge;
}
.eg8 {
outline-style:inset;
}
.eg9 {
outline-style:outset;
}
--></style>
<span
class="eg1"
>outline-style:none;</span>
<span
class="eg2"
>outline-style:dotted;</span>
<span
class="eg3"
>outline-style:dashed;</span> <br><br>
<span
class="eg4"
>outline-style:solid;</span>
<span
class="eg5"
>outline-style:double;</span>
<span
class="eg6"
>outline-style:groove;</span> <br><br>
<span
class="eg7"
>outline-style:ridge;</span>
<span
class="eg8"
>outline-style:inset;</span>
<span
class="eg9"
>outline-style:outset;</span>
ie8- ff2- o7- sf1- gc1-は対応しています。
関連項目:
cursor
|
outline
|
outline-width
| outline-style |
outline-color
2006/04/22発行 2009/07/01更新