概要
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 |
|---|---|---|---|---|---|
| 基本サポート | ? | ? | ? | ? | ? |