備忘録的プログラミングリファレンス

outline-offsetプロパティ

 outline-offsetプロパティは、アウトラインとborderとの間に余白を指定するプロパティです。

 アウトラインはborderの外側に描写され、borderのように行下左右の区別はありません。

 アウトラインは、borderより外に表示されます。そのためにmarginなどで調整する必要があります。

2px、赤色、実線のアウトラインを1.5em外側に表示
outline-offset: 1.5em;
outline: 2px red solid;

関連するプロパティ

 以下は関連するプロパティです。

outlineアウトラインに関するプロパティの一括定義
outline-width線の幅
outline-style線種
outline-color線の色

構文(Syntax)

CSS

outline-offset: length | initial | inherit;

DOM(JavaScript)

値の取得
String = object.style.outlineOffset;
値の設定
object.style.outlineOffset="length | initial | inherit";

値(Values)

Value摘要
0初期値(default値)
lengthCSS長さの単位
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)0
継承(Inherited)No
CSS AnimationYes

Example

 outline-offsetの例です。 見やすいように、outlineは、点線、赤色、幅を3pxの線に指定しています。
 borderの直ぐ外側、marginよりも内側がoutlineプロパティのデフォルトの表示位置です。outline-offsetを20pxに指定していますのでmagrinの幅より外側にアウトラインは表示されます。