概要
CSSプロパティ｢outline-offset｣は、outline プロパティで指定したアウトライン（輪郭線）のオフセット値を指定するのに使用します。オフセットとは、基準点からの距離の値のことです。初期値は０で、要素のすぐ外側に表示されます。また、要素とそのアウトラインの間のスペースは透明になります。
<p>初期値のアウトライン</p>
<p class="outline-offset">要素から5px離れた位置にアウトラインが表示されます</p>
<style>
p {
width: 300px;
margin: 0 auto 20px;
background: #def;
outline: solid;
}
.outline-offset {
outline-offset: 5px;
}
</style>指定可能な値は以下の通りです。
| 値 | 説明 |
|---|---|
| value | 単位はpx, %, emなどが可能です。マイナス値は入れられません |
使用例
テキストエリアをクリックすると、テキストエリアから5px離れた位置にアウトラインが表示されます。
<div>リスト1：<input type="text" class="outline-offset" id="item1"></div>
<style>
div {
margin-bottom: 10px;
}
input:focus {
outline-color: orange;
outline-style: solid;
outline-width: 3px;
}
.outline-offset {
outline-offset: 5px;
}
</style>