CSSアウトラインオフセット

CSS アウトラインの短縮形 CSSテキスト

CSS アウトライン オフセット

outline-offset 属性は、要素のアウトラインと境界線の間にスペースを追加します。 要素とその輪郭の間のスペースは透明です。

次の例では、境界線の端から 25 ピクセル外側のアウトラインを指定します。

この段落には境界線の外側に25ピクセルのアウトラインがあります。

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

自分で試してみてください

次の例は、要素とそのアウトラインの間のスペースが透明であることを示しています。

この段落には、境界線の外側に 25 ピクセルのアウトラインがあります。

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

自分で試してみてください

すべての CSS アウトライン プロパティ

outl@ine-color
属性 説明
ou@tline 省略形の属性。outline-width、outline-style、outline-color を 1 つの宣言で設定します。
は輪郭の色を設定します。
ou@tline-offset は、アウトラインと要素のエッジまたは境界線との間のスペースを指定します。
out@line-style アウトラインのスタイルを設定します。
out@line-width はアウトラインの幅を設定します。