CSS outline-style

CSSボックスモデル CSSのアウトライン幅
この要素には黒い境界線と幅 10 ピクセルの青い輪郭があります。

CSS outline

o1utline は、要素を強調表示するために要素の周囲、境界線の外側に引かれる線です。

CSS には次の outline プロパティがあります:

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

注: アウトラインは border とは異なります。 違いは、アウトラインが要素の境界線の外側に描画され、他のコンテンツと重なる可能性があることです。 同様に、輪郭は要素の寸法の一部ではなく、要素の全体の幅と高さは輪郭線の幅の影響を受けません。

CSS outine スタイル

outline-style 属性はアウトラインのスタイルを指定し、次の値を設定できます。

  • dotted - 点線のアウトラインを定義します。
  • dashed - 破線のアウトラインを定義します。
  • solid - 実線の輪郭を定義します。
  • double - 二重線の輪郭を定義します。
  • groove - 3D 溝のアウトラインを定義します。
  • ridge - 3D リッジのアウトラインを定義します。
  • inset - 3D 凹型アウトラインを定義します。
  • outset - 3D 凸型アウトラインを定義します。
  • none - アウトラインを定義しません。
  • hidden - 非表示のアウトラインを定義します。

次の例は、さまざまな outline-style 値を示しています。

例

さまざまな outline スタイルのデモ:

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

結果:

点線のアウトライン。

点線のアウトライン。

実線のアウトライン。

二重線のアウトライン。

3D 溝のアウトライン。 この効果は、outline-color 値によって異なります。

3D 凸溝のアウトライン。 この効果は、outline-color 値によって異なります。

3D 凹型アウトライン。 この効果は、outline-color 値によって異なります。

3D 凸型アウトライン。 この効果は、outline-color 値によって異なります。

自己分割してみてみてください

注: outline-style 属性が設定されていない限り、他のアウトライン属性 (次の章で詳しく説明します) には何も設定されません。効果！

CSSボックスモデル CSSのアウトライン幅