CSS3

プロパティ

outline-style

→●、mdn

外形線のパターン。

上に示された各種 外形線プロパティにより作成される外形線は、ボックスの“上から”描かれる ― すなわち外形線は、常に手前にあり、ボックスや他のボックスの位置やサイズには波及しない。従って、外形線の表示の有無が変わっても、リフローが生じることはない。

auto

開始<SPAN style="border:1px solid red;
 outline-style:auto;
">テスト</SPAN>終了

開始<SPAN style="border:1px solid red;
 outline-style:auto;
 outline-offset:5px;
">テスト</SPAN>終了

<outline-line-style > ●

＝none
| dotted
| dashed
| solid
| double
| groove
| ridge
| inset
| outset

値 hidden は合法でない。それ以外は <line-style> と同じ。

none

開始<SPAN style="border:1px solid red;
 outline-style:none;
 outline-width:10px;
 outline-color:green;
">テスト</SPAN>終了

dotted

開始<SPAN style="border:1px solid red;
 outline-style:dotted;
 outline-width:10px;
 outline-color:green;
">テスト</SPAN>終了

dashed

開始<SPAN style="border:1px solid red;
 outline-style:dashed;
 outline-width:10px;
 outline-color:green;
">テスト</SPAN>終了

solid

開始<SPAN style="border:1px solid red;
 outline-style:solid;
 outline-width:10px;
 outline-color:green;
">テスト</SPAN>終了

double

開始<SPAN style="border:1px solid red;
 outline-style:double;
 outline-width:10px;
 outline-color:green;
">テスト</SPAN>終了

groove

開始<SPAN style="border:1px solid red;
 outline-style:groove;
 outline-width:10px;
 outline-color:green;
">テスト</SPAN>終了

ridge

開始<SPAN style="border:1px solid red;
 outline-style:ridge;
 outline-width:10px;
 outline-color:green;
">テスト</SPAN>終了

inset

開始<SPAN style="border:1px solid red;
 outline-style:inset;
 outline-width:10px;
 outline-color:green;
">テスト</SPAN>終了

outset

開始<SPAN style="border:1px solid red;
 outline-style:outset;
 outline-width:10px;
 outline-color:green;
">テスト</SPAN>終了

外形線は：

• 矩形でなくてもよい。例えば、要素がいくつかの行たちに分断されている場合、それらの各ボックスを囲うような、最小本数の外形線からなるべきである。
• その各部分は、（改行されるときの、行内 要素のボーダーのように）線が途切れることなく、輪になるべきである。
• その各部分も、矩形になることは要求されない。ボーダー辺をなぞる所では、border-＊-radius による曲線もなぞるべきである。
• その位置は、子孫ボックスに影響され得る。【例えば、子孫ボックスが親ボックスからはみ出すときは、はみ出た部分も囲うように描かれるであろう。】

ユーザー エージェントは、利用者にフォーカスの概念を伝えるものとして 適切な領域を囲うような、外形線を決定するアルゴリズムを利用するべきである。

<outline-line-style> は、［値 hidden は、外形線スタイルとして合法でない］ことを除いて、<line-style> と同じ値を同じ意味として受容する。

値 auto も受容する。この値は、カスタム外形線スタイルを描画することをユーザー エージェントに許可する： 概して、プラットフォームにおけるユーザー インタフェース既定のスタイルで、あるいは、たぶん CSS にて述べ得る詳細よりも多彩なスタイルで ― 例えば、外縁の画素が半透明に輝いて現れるような，丸まった辺による外形線など。そのようなわけで、この仕様は、auto スタイルの外形線を描画するときに outline-color や outline-width が［組み入れられる／利用される］としても、その方法は定義しない。ユーザー エージェントは、auto を solid と扱ってもよい。

テスト