Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

概要

CSSoutline プロパティは、次の細分化されたプロパティを 1 つ以上 同時に設定するための簡略化プロパティです:outline-styleoutline-widthoutline-color。ほとんどの場合このショートカットを使うのが望ましく、より便利です。

アウトラインとボーダーには次の違いがあります:

  • アウトラインは場所を占有せず、コンテンツの上に描かれます
  • アウトラインは矩形ではないかもしれません。Gecko/Firefox では矩形です。しかし例えば Opera は、以下のように矩形でない形状を対象の周りに描きます:
    TEXTTEXTTEXT
初期値以下の各プロパティのショートハンドとして補完します:
適用対象全要素
継承不可
メディアvisual, interactive
計算値以下の各プロパティのショートハンドとして補完します:
  • outline-color: キーワード invert が指定されると計算値も invert。色が指定されると、半透明なら、計算値はそれに一致するrbga() で、不透明なら、それに一致する rgb()。キーワード transparentrgb(0,0,0) にマップされます
  • outline-width: 絶対的 length。キーワード none が指定されると計算値は 0 になります
  • outline-style: 指定値
アニメーションの可否以下の各プロパティのショートハンドとして補完します:
正規順序order of appearance in the formal grammar of the values

構文

形式文法: [ <'outline-color'> || <'outline-style'> || <'outline-width'> ]

1 つから 3 つの値を任意の順序で渡します:

<'outline-width'>
outline-width をご覧ください
<'outline-style'>
outline-style をご覧ください
<'outline-color'>
Gecko 1.9 (Firefox 3) から、要素の color プロパティ(前景色)の値が使われます。outline-color をご覧ください。

outline: solid; | outline: dashed red; | outline: dotted 1px; | outline: ridge thick violet; | outline: custom 5px;
/* 以下 2 つは同じ定義です */

:link:hover { outline: 1px solid #000 }
:link:hover { outline: solid black 1px }

仕様

仕様書 策定状況 コメント
CSS Basic User Interface Module Level 3
The definition of 'outline' in that specification.
勧告候補 変更なし
CSS Level 2 (Revision 1)
The definition of 'outline' in that specification.
勧告  

ブラウザ実装状況

機能 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
基本サポート 1.0 1.0 (1.8) 8.0 6.0 3.1

Gecko 1.8 (Firefox 1.5) 以前では、Mozilla CSS Extension-moz-outline を使って似た効果を実現できます。

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

タグ: 
 このページの貢献者: fscholz, Sebastianz, ethertank, sosleepy
 最終更新者: fscholz,