CSS - outline-offset

概要

属性名 outline-offset
値 <length>
初期値0
適用可能要素すべての要素
継承なし
サポートhttps://caniuse.com/?search=outline-offset

説明

フォーカスがあてられた時などに表示するアウトラインと、ボーダー間の距離を指定します。

値説明
<length>アウトラインとボーダー間の距離を指定します。

使用例

CSS
.test {
  display: block;
  margin-bottom: 1rem;
  border: 1px solid #999;
}
.test:focus {
  outline: 3px solid #c99;
  outline-offset: .3em;
}
HTML
<input type="text" class="test" id="item1">
<input type="text" class="test" id="item2">
<input type="text" class="test" id="item3">
表示

関連項目

outline

リンク

Copyright (C) 2022 杜甫々
初版：2022年7月31日、最終更新：2022年7月31日
https://www.tohoho-web.com/css/prop/outline-offset.htm