もっと"Try it Yourself"以下の例。
定義と使用法
アウトラインは、要素の周りに描かれている行である(outside the borders)要素を作るために"stand out" 。
アウトラインスタイルのプロパティは、アウトラインのスタイルを指定します。
| デフォルト値： | none |
|---|---|
| 継承されました： | no |
| アニメーション： | no. Read about animatable |
| バージョン： | CSS2 |
| JavaScriptシンタックス： | object .style.outlineStyle="dashed" Try it |
ヒントと注意事項
アウトラインは、要素の周りのラインです。 これは、要素のマージン周囲に表示されます。 しかし、それは国境のプロパティとは異なります。
アウトラインは、したがって、要素の幅と高さのプロパティは、アウトラインの幅を含まない、要素の寸法の一部ではありません。
ブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
| プロパティ | |||||
|---|---|---|---|---|---|
| outline-style | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
Note: ！のIE8は、DOCTYPEが指定された場合にのみ、アウトラインスタイルのプロパティをサポートしています。
CSSの構文
outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;プロパティ値
| 値 | 説明 | それを再生します |
|---|---|---|
| none | 何のアウトラインを指定します。 これがデフォルトです | それを再生します» |
| hidden | 隠されたアウトラインを指定します。 | それを再生します» |
| dotted | 点線を指定します | それを再生します» |
| dashed | 破線の輪郭を指定します。 | それを再生します» |
| solid | 実線を指定します。 | それを再生します» |
| double | ダブルアウトライナーを指定します | それを再生します» |
| groove | 3D溝付きアウトラインを指定します。 効果はアウトライン色の値に依存します | それを再生します» |
| ridge | 3D畝状の輪郭を指定します。 効果はアウトライン色の値に依存します | それを再生します» |
| inset | 3Dインセットのアウトラインを指定します。 効果はアウトライン色の値に依存します | それを再生します» |
| outset | 3D最初のアウトラインを指定します。 効果はアウトライン色の値に依存します | それを再生します» |
| initial | このプロパティがデフォルト値に設定します。 初期についての記事を読みます | それを再生します» |
| inherit | その親要素からこのプロパティを継承します。 継承についての記事を読みます |
その他の例
例
異なる値を使用して、アウトラインのスタイルを設定します。
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;} »それを自分で試してみてください 関連ページ
CSSチュートリアル： CSSの概要
CSSリファレンス： outline property
HTML DOMリファレンス： outlineStyle property