CSSのアウトラインのプロパティ
境界の外 - 輪郭が要素の周りに描かれた線です。 これは、要素を作るために使用することができ"stand out" 。
CSSのoutlineプロパティは、スタイル、色、輪郭線の幅を指定します。
この要素は、細い黒のボーダーと10pxの広いと緑のある二重のアウトラインを持っています。
CSSのOutline
outline要素が作成する（国外）要素の周りに描かれているラインである"stand out" 。
しかし、 outlineプロパティは、borderプロパティとは異なる- outline要素の寸法の一部ではありません。 要素の全体の幅と高さは輪郭線の幅に影響されません。
Outlineスタイル
outline-styleプロパティは、アウトラインのスタイルを指定します。
outline-styleプロパティは、次のいずれかの値を持つことができます。
-
dotted-点線のアウトラインを定義します -
dashed-点線のアウトラインを定義します -
solid-固体アウトラインを定義します -
double-ダブルアウトラインを定義します -
groove- 3D溝付きアウトラインを定義します。 効果はアウトライン色の値に依存します -
ridge- 3D畝アウトラインを定義します。 効果はアウトライン色の値に依存します -
inset- 3Dのインセットのアウトラインを定義します。 効果はアウトライン色の値に依存します -
outset- 3D最初のアウトラインを定義します。 効果はアウトライン色の値に依存します -
none-何のアウトラインを定義します -
hidden-隠されたアウトラインを定義します
次の例では、最初に各周りに細い黒の境界線設定<p>要素を、それは異なる示しoutline-style値を：
例
p {
border: 1px solid black;
outline-color: red;
}
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;}結果：
A dotted outline.
A dashed outline.
A solid outline.
A double outline.
A groove outline. The effect depends on the outline-color value.
A ridge outline. The effect depends on the outline-color value.
An inset outline. The effect depends on the outline-color value.
An outset outline. The effect depends on the outline-color value.
»それを自分で試してみてください  | 注：しない限り、後述する他のCSSのアウトラインのプロパティのどれも何の効果もありませんoutline-styleプロパティが設定されています！ |
|---|
アウトラインの色
outline-color性は、輪郭の色を設定するために使用されます。
色はによって設定することができます。
- 名前-のように、色名を指定して"red"
- RGB -のように、RGB値を指定して"rgb(255,0,0)"
- 六角-のように、進値を指定する"#ff0000"
- 反転は、 - （アウトライン色の背景にかかわらず、表示されていることを保証する）色反転を行い、
例
p
{
border: 1px solid black;
outline-style: double;
outline-color: red;
}結果：
A colored outline.
アウトライン幅
outline-widthプロパティは、アウトラインの幅を指定します。
幅は、特定のサイズ（のように設定することができるpx, pt, cm, em薄い媒体、または厚い：等）又は三事前定義された値のいずれかを使用して。
例
p {border: 1px solid black;}
p.one
{
outline-style: double;
outline-color: red;
outline-width: thick;
}
p.two
{
outline-style: double;
outline-color: green;
outline-width: 3px;
}
結果：
A thick outline.
A thinner outline.
Outline -速記プロパティ
コードを短くするためには、一つの特性のすべての個々のアウトラインのプロパティを指定することも可能です。
outlineプロパティは、次の個々のアウトラインのプロパティの簡略記述特性であります：
-
outline-width -
outline-style（必須） -
outline-color
練習で自分自身をテスト！
すべてのCSSアウトラインのプロパティ
| プロパティ | 説明 |
|---|---|
| outline | 1宣言内のすべてのアウトラインのプロパティを設定します。 |
| outline-color | アウトラインの色を設定します。 |
| outline-offset | 要素の概要およびエッジまたは境界線の間のスペースを指定します。 |
| outline-style | アウトラインのスタイルを設定します |
| outline-width | 輪郭線の幅を設定します |