CSS 輪廓

輪廓線是在元素的邊界邊緣之外繪製的線，例如按鈕，活動表單欄位等，以使它們突出。

輪廓 vs 邊界

輪廓通常用於突出元素。一目瞭然的輪廓看起來與邊框非常相似，但它在以下方面與邊框不同：

• 輪廓不佔用空間，因為它們總是放在元素框的頂部，這可能導致它們與頁面上的其他元素重疊。
• 與邊框不同，輪廓不允許我們將每條邊設定為不同的寬度，或為每條邊設定不同的顏色和樣式。各方面的輪廓是相同的。
• 除了重疊之外，輪廓對周圍元素沒有任何影響。
• 與邊框不同，輪廓不會更改元素的大小或位置。
• 輪廓可以是非矩形的。

注意： 如果在元素上新增輪廓，則會佔用網頁上相同的空間量，就好像你沒有該元素的輪廓一樣。

outline-width 屬性

outline-width 屬性指定要在元素上新增的輪廓的寬度。它的值應該是一個 CSS 長度（px ， pt ， em ，等）或允許的關鍵字之一，但百分比或負值是不允許的。就像 border-width 屬性一樣。

p {
    outline-width: thick;
}

注意： 如果 outline-width 缺少或未指定值， outline-width 則將使用將使用預設值（medium） 。

outline-style 屬性

outline-style 屬性設定樣式輪廓，如： solid ， dotted 等等。

該屬性可採取以下值之一： none ， hidden ， dashed ， dotted ， double ， groove ， inset ， outset ， ridge 和 solid 。就像 border-style 屬性一樣。

比如，

p {
    outline-style: double;
}

outline-color 屬性

outline-color 屬性設定輪廓的顏色。

p {
    outline-style: solid;
    outline-color: #0000ff;
}

你也可以設定 outline-color 為 transparent 。

**注意：**如果單獨使用 outline-color 屬性，則該屬性不起作用。使用該 outline-style 屬性首先設定輪廓。

outline 速記屬性

outline CSS 屬性是設定一個或多個單獨的輪廓屬性的速記屬性。設定 outline-style ， outline-width 並 outline-color 在一個單一的規則中。

p {
    outline: 5px solid #9acd32;
}

如果在設定輪廓簡寫屬性時省略或未指定單個輪廓屬性的值，則將使用該屬性的預設值（如果有）。

注意： 如果在設定 outline-color 元素的輪廓時缺少或未指定屬性的值（例如 outline: 5px solid;），則元素的 color 屬性將用作 outline-color 的值。

在下面的示例中，輪廓將是 5px 寬度的純黑線：

但是，在這種情況下，省略該值將導致根本沒有顯示輪廓，因為屬性的預設值是。 outline-style outline-style none

在下面的示例中，將沒有輪廓：

p {
    color: black;
    outline: 5px solid;
}

警告： Internet Explorer 7 及更早版本不支援該 outline 屬性。僅當指定了 <!DOCTYPE> 時，IE8 才支援該 outline 屬性。

刪除活動連結周圍的虛線

outline 屬性廣泛用於刪除活動連結周圍的虛線。

a, a:acive, a:focus {
    outline: none; /* Works in Firefox, Chrome, IE8 and above */
}