CSS 輪廓
輪廓是繪製在元素邊框之外的線條。
此元素具有黑色邊框和寬度為 10px 的綠色輪廓。
自己動手試一試 »
CSS 輪廓
輪廓是圍繞元素繪製的線條，位於邊框外側，以使元素“突出”。
CSS 具有以下輪廓屬性
-
outline-style -
outline-color -
outline-width -
outline-offset -
outline
注意：輪廓與邊框不同！與邊框不同，輪廓繪製在元素的邊框之外，可能會與其他內容重疊。此外，輪廓不是元素尺寸的一部分；元素的總寬度和高度不受輪廓寬度影響。
CSS 輪廓樣式
outline-style 屬性指定輪廓的樣式，可以具有以下值之一
dotted- 定義點狀輪廓dashed- 定義虛線輪廓solid- 定義實心輪廓double- 定義雙線輪廓groove- 定義 3D 凹槽輪廓ridge- 定義 3D 凸脊輪廓inset- 定義 3D 內嵌輪廓outset- 定義 3D 外凸輪廓none- 定義無輪廓hidden- 定義隱藏輪廓
以下示例顯示了不同的 outline-style 值
示例
不同輪廓樣式的演示
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;}
結果
點狀輪廓。
虛線輪廓。
實心輪廓。
雙線輪廓。
凹槽輪廓。效果取決於 outline-color 值。
凸脊輪廓。效果取決於 outline-color 值。
內嵌輪廓。效果取決於 outline-color 值。
外凸輪廓。效果取決於 outline-color 值。
注意：除非設定了 outline-style 屬性，否則其他輪廓屬性（您將在後續章節中瞭解更多）將不產生任何效果！
