CSS

The CSS outline-offset property is used to specify the position of an outline.

outline-offset

　outline-offsetプロパティは、アウトラインの位置を指定するためのプロパティです。アウトラインは、要素の周りに描画される線のことで、主にフォーカスしたときに表示されます。

　このプロパティを使用すると、アウトラインの位置を要素からどれだけ離すかを指定できます。つまり、要素に対して相対的にアウトラインを配置することができます。

　例えば、以下のようにアウトラインを設定することができます。

<div class="smp1"></div>

.smp1 {
	margin: 20px;
	width: 200px;
	height: 100px;
	border: 1px solid black;
	outline: 2px solid blue;
	outline-offset: 10px;
}

　上記のCSSコードでは、div要素の周りに 2pxの青色の線が描画されますが、outline-offsetプロパティによって borderから 10px離れた場所にアウトラインが配置されます。

　また、outline-offsetプロパティには負の値を指定することもできます。例えば、以下のように設定することができます。

.smp2 {
	margin: 20px;
	width: 200px;
	height: 100px;
	border: 1px solid black;
	outline: 2px solid blue;
	outline-offset: -10px;
}

　上記の CSSコードでは、div要素の周りに 2pxの青色の線が描画されますが、outline-offsetプロパティによって borderから 10px内側にアウトラインが配置されます。