mozilla

outline-style

概要

CSS の outline-style プロパティは、要素のアウトラインのスタイルを設定します。アウトラインとは、要素を囲むようにボーダー境界の外側に描かれる線で、要素を目立たせます。

たいていの場合、outline-style、outline-width、outline-color の代わりに簡略化プロパティ outline を使ったほうが便利です。

  • 初期値none
  • 適用対象全要素
  • 継承しない
  • メディアvisual, interactive
  • 計算値指定通り
  • アニメーションの可否不可
  • 正規順序形式文法で定義される、一意であいまいでない順序

構文

形式文法: <br-style>
outline-style: none
outline-style: dotted
outline-style: dashed
outline-style: solid
outline-style: double
outline-style: groove
outline-style: ridge
outline-style: inset
outline-style: outset

outline-style: inherit

<br-style> は次のうちのいずれかです:

none
アウトラインを描きません(outline-width は 0 です)
dotted
丸い連続した点のアウトラインです
dashed
隙間の広い、破線のアウトラインです
solid
一本線のアウトラインです
double
二重線のアウトラインです。outline-width は二本の線とその間のスペースの合計になります
groove
キャンバスに掘られたように見えるアウトラインです
ridge
groove の逆方向で、キャンバスから飛び出たように見えるアウトラインです
inset
キャンバスに埋め込まれたように見える
アウトラインです
outset
inset の逆方向で、キャンバスから飛び出たように見えるアウトラインです

.example {  /* make the outline a 3D groove style */
   outline-style: groove;        /* same result as "outline: groove" */ 
}

仕様

仕様書 策定状況 コメント
CSS Basic User Interface Module Level 3 草案 変更なし
CSS Level 2 (Revision 1) 勧告  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート  1.0 1.5 (1.8) [*] 8.0 7.0 1.2 (125)
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? ? ? ? ?

[*] Gecko 1.8 (Firefox 1.5) 以前では、Mozilla CSS Extension-moz-outline-style を使ってこの効果を作れます

関連情報

ドキュメントのタグと貢献者

Contributors to this page: ethertank, sosleepy
最終更新者: ethertank,
サイドバーを隠す