outline-offset

CSS の outline-offset プロパティは、要素の辺や境界線と輪郭線との空間の量を設定します。

輪郭線 (outline) は要素の周囲、境界線 (border) の外側に描かれる線です。要素とその輪郭線との空間は透明です。つまり、親要素の背景と同じになります。

構文

/* <length> 値 */
outline-offset: 3px;
outline-offset: 0.2em;

/* グローバル値 */
outline-offset: inherit;
outline-offset: initial;
outline-offset: unset;

<length>: 要素とその輪郭線との空間の幅です。負の値を指定すると輪郭線は要素の内側に表示されます。 0 を指定すると輪郭線は要素との隙間を置かずに表示されます。

<length>

p {
  outline: 1px dashed red;
  outline-offset: 10px;
  background: yellow;
  border: 1px solid blue;
  margin: 15px;
}

<p>Gallia est omnis divisa in partes tres.</p>

仕様書	状態	備考
CSS Transitions outline-offset の定義	草案	`outline-offset` をアニメーション可能なものとして定義。
CSS Basic User Interface Module Level 3 outline-offset の定義	勧告	初回定義

初期値	`0`
適用対象	すべての要素
継承	なし
メディア	一括指定の各プロパティとして `visual`: DB に値が見つかりません！ `interactive`: DB に値が見つかりません！
計算値	指定通り。ただし相対的 length は絶対的 length に変換
アニメーションの種類	length
正規順序	形式文法で定義される一意のあいまいでない順序