コーススケジュール

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;
}

outl@ine-color

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