outline-offset
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2017年4月.
試してみましょう
outline-offset: 4px; outline-offset: 0.6rem; outline-offset: 12px; outline: 5px dashed blue; <section class="default-example" id="default-example"> <div class="transition-all" id="example-element"> This is a box with an outline around it. </div> </section> #example-element { border: 2px solid crimson; outline: 0.75em solid; padding: 0.75em; width: 80%; height: 100px; } 構文
css
/* <length> 値 */ outline-offset: 3px; outline-offset: 0.2em; /* グローバル値 */ outline-offset: inherit; outline-offset: initial; outline-offset: revert; outline-offset: revert-layer; outline-offset: unset; 値
<length>-
要素とその輪郭線との空間の幅です。負の値を指定すると輪郭線は要素の内側に表示されます。
0を指定すると輪郭線は要素との隙間を置かずに表示されます。
解説
輪郭線 (outline) は要素の周囲、境界線 (border) の外側に描かれる線です。要素とその輪郭線の間は透明です。つまり、親要素の背景と同じになります。
公式定義
| 初期値 | 0 |
|---|---|
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 指定通り。ただし相対的な長さはは絶対的な長さに変換される |
| アニメーションの種類 | length |
形式文法
outline-offset =
<length>
例
輪郭線のオフセットをピクセル数で設定
HTML
html
<p>Gallia est omnis divisa in partes tres.</p> CSS
css
p { outline: 1px dashed red; outline-offset: 10px; background: yellow; border: 1px solid blue; margin: 15px; } 結果
仕様書
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # outline-offset |
ブラウザーの互換性
Loading…