CSS outline-style 属性

定義と用法

outline-style 属性は要素の全体の輪郭のスタイルを設定するために使用されます。スタイルが none でないと、輪郭は表示されません。

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

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

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

も参照してください：

CSS 教程：CSS 轮廓

CSS 参考手帳：outline 属性

HTML DOM 参考手帳：outlineStyle 属性

例

輪郭のスタイルを設定：

p
  {
  outline-style:dotted;
  }

亲自试一试

CSS 语法

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

属性値

値 説明
none デフォルト。無輪郭を定義します。
hidden 非表示の輪郭を定義します。
dotted 点状の輪郭を定義します。
dashed 点線の輪郭を定義します。
solid 実線の輪郭を定義します。
double 二重線の輪郭を定義します。二重線の幅はoutline-widthの値に等しいです。
groove 3Dの凹溝輪郭を定義します。この効果はoutline-colorの値に依存します。
ridge 3Dの凸溝輪郭を定義します。この効果はoutline-colorの値に依存します。
inset 3Dの凹輪郭を定義します。この効果はoutline-colorの値に依存します。
outset 3Dの凸輪郭を定義します。この効果はoutline-colorの値に依存します。
inherit 親要素から輪郭のスタイルの設定を継承するべきです。

技術的詳細

デフォルト値： none
継承性： no
バージョン： CSS2
JavaScript 语法： object.style.outlineStyle="dotted"

TIY 実例

輪郭のスタイルを設定
この例では、輪郭のスタイルを設定する方法を示します。

ブラウザのサポート

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

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

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