仕様
outline | <'outline-style'> |
---|---|
一括/個別 | 一括指定 |
初期値 | 個々のプロパティ |
適用対象 | すべての要素(疑似要素を含む) |
継承 | なし |
百分率 | なし |
計算値 | 個々のプロパティ |
outline プロパティは、要素の上下左右の輪郭線の線種(outline-style), 幅(outline-width), 色(outline-color)の値を単一の宣言で設定する一括指定プロパティです。
順番は任意です。省略された値は、それぞれの初期値が設定されます。
値を記述した処だけ設定されるのではないので、注意が必要です。
上,右,下,左に異なる値を指定する事はできません。
補足1 : outline-style の初期値は none, outline-width の初期値は medium, outline-color の初期値は invert(サポートしてない場合はcurrentColor) です。
補足2 : outline-style の計算値は 「指定どおり。」, outline-width の計算値は 「絶対的な長さ。outline-style が none の場合は 0 。」, outline-color の計算値は 「invert の計算値は invert です。currentColor の計算値は currentColor です。基本カラーキーワード、RGB 16進値、および拡張カラーキーワードの計算値は、RGB値の3つ組に相当します。transparent の計算値は、rgba(0,0,0,0) です。他のすべての値の場合、計算値は指定された値です。」 です。
値の組み合わせ
- cdvSample000
> div { }
- <div class=
"cdvSample000"> - <div style=
"border: dashed 1px;">例</div></div>
例示の雛型です。style属性を書き換えて例示しています。
文字(コンテンツ)は、前景色(文字の色)と文字サイズの確認の為に記述しています。
- outline: solid
1px ;#0000ff
値を線種,幅,色の3種全てに指定しました。outline-style:
- outline: 1px #0000ff;
値を幅,色の2種に指定しました。省略したのは outline-style で、初期値の none が指定された扱い(宣言値)になります。outline-style:
outline-style の指定値(計算値)が none の場合は、outline-width の計算値は 0 と扱われます。
とりあえず記述して継承したい場合などは、仮として outline:
別の宣言で outline-style のカスケード値を none 以外にする場合は、この記述もありだと思います。
- outline: solid #0000ff;
値を線種,色の2種指定しました。省略したのは outline-width で、初期値の medium が指定された扱い(宣言値)になります。outline-style:
- outline: solid 1px;
値を線種,幅の2種指定しました。省略したのは outline-color で、初期値の currentColor が指定された扱いになります。outline-style:
(invert をサポートしていれば、outline-color の初期値は invert です。)
- outline: solid;
線種を指定しました。省略した outline-width は初期値の medium が、outline-color は初期値の currentColor が指定された扱いになります。outline-style:
(invert をサポートしていれば、outline-color の初期値は invert です。)
幅,色だけの指定は、線種の省略で初期値 none が扱われてしまいます。
CSS全体のキーワード
値を1つのみ指定して全体に対して適用されています。1つ1つに対するキーワードとしての使用は出来ません。
個別に適用したい場合は、個別指定
- cdvSample020
> div { padding: 1em; outline: solid1px ;}#0000ff
- <div class=
"cdvSample020"> - <div>親<div style=
"border: dashed 1px;">子</div></div></div>
例示の雛型です。子要素のstyle属性を書き換えて例示しています。
パティングは、親子の余白として指定しています。文字(コンテンツ)は、前景色(文字の色)と文字サイズの確認の為に記述しています。親要素の輪郭線の記述は、継承の確認の為に記述しています。
- outline: inherit;
キーワード inheritを指定しました。outline-style:
- outline: initial;
キーワード initialを指定しました。outline-style:
- outline: unset;
キーワード unsetを指定しました。outline-style:
付記
次は、「outline-style プロパティ」です。
要素の輪郭線の線種を記述する個別指定プロパティ outline-style について記述する事を目的としたページです。
上位のページの「要素の輪郭線」はこちらです。