CSS outline-color 属性

定義と使用方法

outline（輪郭）は、要素の周りに描かれる線で、枠線の外側に位置し、要素を強調する役割を果たします。outline属性は、要素の周りの輪郭線を設定できます。

注記：常に outline-style 属性を宣言した後に outline-color 属性を宣言してください。要素が輪郭を取得した後にのみ、輪郭の色を変更できます。

注記：輪郭線はスペースを占めず、必ずしも矩形ではありません。

outline-color 属性は、要素の全体の輪郭部分の色を設定します。覚えておくべきことは、輪郭のスタイルが none でないことです。なぜなら、noneの場合は輪郭は表示されません。

も参照してください：

CSS タイプ：CSS 轮廓

CSS リファレンスマニュアル：outline 属性

HTML DOM リファレンスマニュアル：outlineColor 属性

例

点状の輪郭の色を設定：

p
  {
  outline-style:dotted;
  outline-color:#00ff00;
  }

自分で試してみる

CSS 语法

outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

属性値

値 説明
color_name 色名を指定して輪郭の色を設定します（例：red）。
hex_number 十六進値の色値を指定して輪郭の色を設定します（例：#ff0000）。
rgb_number rgbコードの色値を指定して輪郭の色を設定します（例：rgb(255,0,0)）。
invert デフォルト。逆の色（逆の色）を実行します。これにより、異なる背景色の中で輪郭が見えるようになります。
inherit 親要素から輪郭の色の設定を継承するべきであることを指定します。

技術的詳細

デフォルト値： invert
継承性： no
バージョン： CSS2
JavaScript 语法： object.style.outlineColor="#0000FF"

TIY 実例

輪郭の色を設定
この例では、輪郭の色を設定する方法を示します。

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
1.0 8.0 1.5 1.2 7.0

注記：DOCTYPEが指定されている場合、IE8はoutline属性をサポートします。