CSS 輪郭

この要素は 10px の幅の黒い境界線と青い輪郭を持ちます。

CSS 輪郭

輪郭は要素の周囲に描かれる一つの線で、境界線の外に位置し、要素を強調するために使用されます。

CSS には以下の輪郭属性があります:

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

注意:輪郭と境界線異なる!異なる点は、輪郭は要素の境界線の外に描かれ、他のコンテンツと重なり合う可能性があります。また、輪郭は要素のサイズの一部ではありません;要素の合計幅と高さは輪郭線の幅に影響されません。

CSS 輪郭スタイル

outline-style 属性は輪郭のスタイルを指定し、以下の値を設定できます:

  • dotted - 点状の輪郭を定義します。
  • dashed - 虚線の輪郭を定義します。
  • solid - 実線の輪郭を定義します。
  • double - 双線の輪郭を定義します。
  • groove - 3D 凹槽輪郭を定義します。
  • ridge - 3D 凸槽輪郭を定義します。
  • inset - 3D 凹辺輪郭を定義します。
  • outset - 3D 凸辺輪郭を定義します。
  • none - 輪郭を定義しません。
  • hidden - 隠された輪郭を定義します。

以下は異なる outline-style 値を示しています:

異なる輪郭スタイルを示します:

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 属性が設定されていない場合、他のアウトライン属性(次の章で詳細に説明します)は何も作用しません!