CSS 輪郭
- 前のページ CSS フレームモデル
- 次のページ 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
属性が設定されていない場合、他のアウトライン属性(次の章で詳細に説明します)は何も作用しません!
- 前のページ CSS フレームモデル
- 次のページ CSS 輪郭幅