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