CSSのアウトラインの色
CSSのアウトラインの色
このoutline-colorプロパティは、アウトラインの色を設定するために使用されます。
色は次の方法で設定できます。
- name-「red」などの色の名前を指定します
- HEX-「＃ff0000」のような16進値を指定します
- RGB-「rgb（255,0,0）」のようなRGB値を指定します
- HSL-「hsl（0、100％、50％）」のようにHSL値を指定します
- invert-色の反転を実行します（背景色に関係なく、アウトラインが表示されるようにします）
次の例は、さまざまな色のさまざまなアウトラインを示しています。また、これらの要素の輪郭の内側にも細い黒い境界線があることに注意してください。
赤い実線の輪郭。
点線の青い輪郭。
最初の灰色の輪郭。
例
p.ex1
{
border: 2px solid black;
outline-style: solid;
outline-color: red;
}
p.ex2
{
border: 2px solid black;
outline-style: dotted;
outline-color: blue;
}
p.ex3
{
border: 2px solid black;
outline-style: outset;
outline-color: grey;
}
HEX値
アウトラインの色は、16進値（HEX）を使用して指定することもできます。
例
p.ex1 {
outline-style: solid;
outline-color: #ff0000;
/* red */
}
RGB値
またはRGB値を使用して：
例
p.ex1 {
outline-style: solid;
outline-color: rgb(255, 0, 0); /*
red */
}
HSL値
HSL値を使用することもできます。
例
p.ex1 {
outline-style: solid;
outline-color: hsl(0, 100%, 50%);
/* red */
}
HEX、RGB、およびHSL値の詳細については、CSSカラーの章を参照してください。