Outline
borderじゃないoutlineのCSS
詳しい導入事例は導入方法を参照してください。
- DEMO
- offset
outlines
outlines
outlines
border
border
border
outlines
outlines
outlines
border と outline の違い
| 項目 | border | outline |
|---|---|---|
| 要素の位置 | 内側（paddingの外側） に適用される | 外側（borderの外側） に適用される |
| スペース | 要素の幅・高さに影響する（ボックスサイズに含まれる） | スペースを取らない（要素のサイズに影響しない） |
| オフセット | オフセット不可 | オフセット可能 |
| 個別の辺の設定 | border-top / border-right などで個別に指定可能 | outline は個別には指定できない |
| z-index | border は要素の背景より 上 に描画される | outline は borderより上 に描画される |
| 使用例 | 要素の装飾に使う | フォーカス時の強調 |