outline

概要

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

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

  • アウトラインは場所を占有せず、コンテンツの上に描かれます
  • アウトラインは矩形ではないかもしれません。Gecko/Firefox では矩形です。しかし例えば Opera は、以下のように矩形でない形状を対象の周りに描きます:
    TEXTTEXTTEXT
  • 初期値 以下の各ロングハンドプロパティの初期値が使用されます:
    • outline-color: invert, for browsers supporting it, currentColor for the other
    • outline-width: medium
    • outline-style: none
  • 適用対象 全要素
  • 継承 継承しない
  • メディア visual, interactive
  • 計算値 as each of the properties of the shorthand:
    • outline-color: For the keyword invert, the computed value is invert. For the color value, if the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgb(0,0,0).
    • outline-width: an absolute length; if the keyword none is specified, the computed value is 0
    • outline-style: 指定値
  • アニメーションの可否 以下の各プロパティのショートハンドとして補完します:
    • outline-color: 可。color の値として補完します。
    • outline-width: 可。length の値として補完します。
    • outline-style: 不可
  • 正規順序 order of appearance in the formal grammar of the values

構文

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

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 草案 変更なし
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
基本サポート 1.0 1.0 (1.8) 8.0 6.0 3.1

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

関連情報

Document Tags and Contributors

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