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-定義了一個三維脊輪廓。 其效果取決於輪廓色值 -
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 | 設置在一個聲明中所有的輪廓屬性 |
| outline-color | 設置輪廓的顏色 |
| outline-offset | 指定的元素的輪廓和邊緣或邊界之間的空間 |
| outline-style | 設置輪廓的風格 |
| outline-width | 設置輪廓的寬度 |