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 属性，否则其他轮廓属性（您将在后续章节中了解更多）将不产生任何效果！
