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

概要

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

初期値0
適用対象全要素
継承不可
メディアvisual, interactive
計算値指定通り。ただし相対的 length は絶対的 length に変換
アニメーションの可否可。 の値として補完しますlength
正規順序形式文法で定義される一意のあいまいでない順序

このプロパティで設定された空間は、透明になるでしょう(親要素の背景が見えます)

構文

形式文法: <length>
outline-offset: 3px
outline-offset: 0.2em

outline-offset: inherit

<length>
空間の幅です。使用可能な単位については <length> をご覧ください。負の値は要素の内側にアウトラインを置きます。</length>

.example {
  outline: dashed thin;
  /* Move the outline 3px away from the border */
  outline-offset: 3px;
}

上のコードは次のような効果を作ります:

outline: offset 5px;

別の例:

outline: multiple offsets;

仕様

仕様書 策定状況 コメント
CSS Basic User Interface Module Level 3
outline-offset の定義
勧告候補 初回定義
CSS Transitions
outline-offset の定義
草案 outline-offset をアニメーション可能として定義

ブラウザ実装状況

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

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

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