outline-offset プロパティ

プロパティ outline-offset は、スペースを占有しない境界線であるアウトラインのオフセットを設定します。プロパティの値には、パーセントを除くあらゆるサイズ単位を使用できます。デフォルト値は 0 です。正の値は要素の外側にアウトラインを移動させ、負の値は内側に移動させます。

構文

セレクタ {
	outline-offset: 値;
}

例 . 正の値

アウトラインが要素（背景色で強調表示）から離れています：

<div id="elem"></div>

#elem {
	outline-offset: 5px;
	outline-width: 1px;
	outline-style: solid;
	outline-color: black;
	background-color: #e4f1ed;
	width: 300px;
	height: 100px;
}

例 . 負の値

アウトラインが要素の内側にあります：

<div id="elem"></div>

#elem {
	outline-offset: -10px;
	outline-width: 1px;
	outline-style: solid;
	outline-color: black;
	background-color: #e4f1ed;
	width: 300px;
	height: 100px;
}

例 . 負の値 outline + border

このような面白い効果を作ることができます（境界線間の白い隙間の太さは 10px であり、 14 ではないことに注意してください。これは outline が 4px の厚さで一部を覆っているためです）：

<div id="elem"></div>

#elem {
	outline-offset: -14px;
	outline: 4px solid green;
	border: 4px solid red;
	width: 300px;
	height: 100px;
}

outline-offset プロパティ

構文

例 . 正の値

例 . 負の値

例 . 負の値 outline + border

関連項目