このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
outline-style
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月.
outline-style はCSS のプロパティで、要素の輪郭線のスタイルを設定します。輪郭線とは要素の周りに描かれる線のことで、border よりも外側です。
試してみましょう
outline-style: none;outline-style: dotted;outline-style: solid;outline-style: groove;outline-style: inset;<section> <div> これは周囲に輪郭線があるボックスです。 </div></section>#example-element { outline: 0.75em solid; padding: 0.75em; width: 80%; height: 100px;}たいていの場合、輪郭線の見た目を定義するときは一括指定プロパティoutline を使ったほうが便利です。
構文
/* キーワード値 */outline-style: auto;outline-style: none;outline-style: dotted;outline-style: dashed;outline-style: solid;outline-style: double;outline-style: groove;outline-style: ridge;outline-style: inset;outline-style: outset;/* グローバル値 */outline-style: inherit;outline-style: initial;outline-style: revert;outline-style: revert-layer;outline-style: unset;outline-style プロパティは、以下に挙げた値のうちの一つで指定します。
値
autoユーザーエージェントに輪郭線の描画を任せます。
none輪郭線を描きません。
outline-widthは0です。dotted点線の輪郭線です。
dashed破線の輪郭線です。
solid1 本の実線の輪郭線です。
double2 本の実線の輪郭線です。
outline-widthは 2 本の線とその隙間の合計です。grooveページに刻まれたかのように見える輪郭線です。
ridgegrooveの逆で、ページから押し出されたように見える輪郭線です。inset領域がページに埋め込まれたかのように見える輪郭線です。
outsetinsetの逆で、領域がページから隆起しているように見える輪郭線です。
公式定義
| 初期値 | none |
|---|---|
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 計算値の型による |
形式文法
outline-style =
auto|
<outline-line-style>
<outline-line-style> =
none|
auto|
dotted|
dashed|
solid|
double|
groove|
ridge|
inset|
outset
例
輪郭線のスタイルを auto に設定
auto の値は、輪郭線のスタイルが独自のものであることを表します。仕様書によれば、「典型的には、プラットフォーム用のユーザーインターフェイスの既定のスタイル、または、CSS で詳細に記述できるスタイルよりも表現豊かなスタイル 、例えば、輝いて見える半透明の外郭を持つ、輪郭の丸い輪郭線」となっています。
HTML
<div> <p>Outline デモ</p></div>CSS
.auto { outline-style: auto; /* "outline: auto" と同じ */}/* デモを見やすく */* { outline-width: 10px; padding: 15px;}結果
輪郭線を dashed と dotted に設定
HTML
<div> <div> <p>Outline Demo</p> </div></div>CSS
.dotted { outline-style: dotted; /* "outline: dotted" と同じ */}.dashed { outline-style: dashed;}/* デモを見やすく */* { outline-width: 10px; padding: 15px;}結果
輪郭線のスタイルを solid と double に設定
HTML
<div> <div> <p>Outline Demo</p> </div></div>CSS
.solid { outline-style: solid;}.double { outline-style: double;}/* デモを見やすく */* { outline-width: 10px; padding: 15px;}結果
輪郭線のスタイルを groove と ridge に設定
HTML
<div> <div> <p>Outline Demo</p> </div></div>CSS
.groove { outline-style: groove;}.ridge { outline-style: ridge;}/* デモを見やすく */* { outline-width: 10px; padding: 15px;}結果
輪郭線のスタイルを inset と outset に設定
HTML
<div> <div> <p>Outline デモ</p> </div></div>CSS
.inset { outline-style: inset;}.outset { outline-style: outset;}/* デモを見やすく */* { outline-width: 10px; padding: 15px;}結果
仕様書
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # outline-style |