このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
outline-width
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
CSS のoutline-width プロパティは、要素の輪郭線の太さを設定します。輪郭線とは要素の周りに描かれる線のことで、border よりも外側です。
試してみましょう
outline-width: 12px;outline-width: thin;outline-width: medium;outline-width: thick;<section> <div> This is a box with an outline around it. </div></section>#example-element { outline: 0.75em solid; padding: 0.75em; width: 80%; height: 100px;}たいていの場合、輪郭線の見た目を定義するときは一括指定プロパティoutline を使ったほうが便利です。
構文
css
/* キーワード値 */outline-width: thin;outline-width: medium;outline-width: thick;/* <length> 値 */outline-width: 1px;outline-width: 0.1em;/* グローバル値 */outline-width: inherit;outline-width: initial;outline-width: revert;outline-width: revert-layer;outline-width: unset;outline-width プロパティは、以下に挙げた値のうちの一つで指定します。
値
公式定義
| 初期値 | medium |
|---|---|
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 絶対的な長さ、キーワードnone が指定されると計算値は0 になる |
| アニメーションの種類 | length |
形式文法
outline-width =
<line-width>
<line-width> =
<length [0,∞]>|
thin|
medium|
thick
例
要素の輪郭線の幅の設定
HTML
html
<span>thin</span><span>medium</span><span>thick</span><span>2px</span><span>1ex</span><span>1.2em</span>CSS
css
span { outline-style: solid; display: inline-block; margin: 20px;}#thin { outline-width: thin;}#medium { outline-width: medium;}#thick { outline-width: thick;}#twopixels { outline-width: 2px;}#oneex { outline-width: 1ex;}#em { outline-width: 1.2em;}結果
仕様書
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # outline-width |