“outline”プロパティ:輪郭線

概要

“outline”プロパティは要素の輪郭線の太さ、見た目、色を指定する以下のプロパティの一括指定プロパティです。

• “outline-width”プロパティ
• “outline-style”プロパティ
• “outline-color”プロパティ

輪郭線はボーダーとは違って領域を占有しません。なので輪郭線の太さはレイアウントには影響を与えません。指定された太さによっては他の要素に重なって描画される場合があります。ボーダーを持つ場合は輪郭線はその外側に描画されます。

輪郭線は要素にフォーカスした時などに要素を強調する場面で使用されます。

“outline-offset”プロパティによって輪郭線が要素と重なる場合は輪郭線は一番手前に描画されます。

サンプルコード

div { outline: 5px dotted rgb(168,214,105);}


値

“<'outline-color'>”値、“<'outline-style'>”値、“<'outline-width'>”値をホワイトスペースで区切って1個ずつ指定できます。値を記述する順番は自由で、初期値のままで良い値は省略できます。ただし、“<'outline-style'>”値を指定しない場合は既定値が輪郭線を表示しない“none”のため、輪郭線が表示されません。

仕様書

定義されている仕様書

outline

<'outline-color'>
<'outline-style'>
<'outline-width'>

輪郭線を指定する

div {

outline: 5px dotted rgb(168,214,105);

}

outline: 5px dotted rgb(168,214,105);