CSS 輪郭オフセット

outline-offset 属性は要素の輪郭と枠線の間にスペースを追加します。輪郭と要素の間のスペースは透明です。

以下の例では、枠線外 25px の輪郭を指定しています：

この段落の枠線外には 25px の輪郭があります。

p {
  margin: 50px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 25px;
}

以下の例では、要素と輪郭の間のスペースが透明であることを示しています：

この段落の枠線外の輪郭は 25px です。

p {
  margin: 30px;
  background: yellow;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 25px;
}

すべての CSS 輪郭属性

属性	説明
outline	ショートカット属性、outline-width、outline-style、outline-color を一つの宣言で設定します。
outline-color	輪郭の色を設定します。
outline-offset	輪郭と要素のエッジまたはボーダー間のスペースを指定します。
outline-style	輪郭のスタイルを設定します。
outline-width	輪郭の幅を設定します。