---

CSS outline-style 属性

介绍

CSS outline-style 属性用于为一个元素的轮廓线添加样式，并将其显示为一个独立的形状。轮廓线通常出现在元素被选中时，并且不占用任何对布局的空间。

语法

outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

取值

• none：不显示轮廓线；
• hidden：与none相同，但元素被键盘导航（tab键等）时会显示出来；
• dotted：显示点状轮廓线；
• dashed：显示虚线轮廓线；
• solid：显示实线轮廓线；
• double：显示双实线轮廓线；
• groove：显示3D凹槽轮廓线，基于border-color暗色计算；
• ridge：显示3D凸出轮廓线，基于border-color亮色计算；
• inset：显示3D嵌入轮廓线，基于border-color暗色计算；
• outset：显示3D浮出轮廓线，基于border-color亮色计算；
• initial：设置为默认值；
• inherit：从父元素继承；

实例

点状轮廓线

outline-style: dotted;

虚线轮廓线

outline-style: dashed;

实线轮廓线

outline-style: solid;

双实线轮廓线

outline-style: double;

3D凹槽轮廓线

outline-style: groove;

3D凸出轮廓线

outline-style: ridge;

3D嵌入轮廓线

outline-style: inset;

3D浮出轮廓线

outline-style: outset;

总结

CSS outline-style 属性可以为元素添加轮廓线样式，这可以让用户在点击或键盘导航时更容易识别所选元素。属性的取值较为多样，且可以通过颜色属性设置轮廓线的颜色，为页面带来更多元的设计风格。