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;}

結果：

點狀輪廓。

虛線輪廓。

實線輪廓。

雙線輪廓。

3D 凹槽輪廓。此效果取決于 outline-color 值。

3D 凸槽輪廓。此效果取決于 outline-color 值。

3D 凹邊輪廓。此效果取決于 outline-color 值。

3D 凸邊輪廓。此效果取決于 outline-color 值。

親自試一試

注意：除非設置了 outline-style 屬性，否則其他輪廓屬性（在下一章中將詳細介紹）都不會有任何作用！