CSS 轮廓
轮廓是在元素边框之外绘制的一条线。
此元素具有黑色边框和绿色轮廓，宽度为 10 像素。
亲自试一下 »
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 属性，否则其他轮廓属性（您将在下一章中了解更多）将不会有任何效果！
