CSS设置元素的轮廓样式

轮廓是绘制于元素周围的线条，位于边框边缘的外围，可起到突出元素的作用。那么如何设置元素的轮廓样式？下面本篇文章就来给大家介绍一下使用CSS设置元素轮廓样式的方法，希望对大家有所帮助。

轮廓位于边框边缘的外围，它的位置让它不像边框那样参与到文档流中，因此轮廓出现或消失时不会影响文档流，即不会导致文档的重新显示。

想要使用CSS设置元素的轮廓样式，可使用outline属性来指定轮廓样式，颜色和宽度。outline属性是一个简写属性，可在一个声明中设置所有的轮廓属性。

语法：

outline: outline-color outline-style outline-width;

例：

p{

outline:1px solid #000000;

}

如果不设置其中的某个值，也不会出问题，比如 outline:solid #ff0000; 也是允许的。

轮廓线的风格类型有：

●　none：默认。定义无轮廓。

●　dotted：定义点状的轮廓。

●　dashed：定义虚线轮廓。

●　solid：定义实线轮廓。

●　double：定义双线轮廓。双线的宽度等同于 outline-width 的值。

●　groove：定义 3D 凹槽轮廓。此效果取决于 outline-color 值。

●　ridge：定义 3D 凸槽轮廓。此效果取决于 outline-color 值。

●　inset：定义 3D 凹边轮廓。此效果取决于 outline-color 值。

●　outset：定义 3D 凸边轮廓。此效果取决于 outline-color 值。

示例：

点线轮廓

虚线轮廓

实线轮廓

双线轮廓

凹槽轮廓

垄状轮廓

嵌入轮廓

外凸轮廓

效果图：

轮廓线的颜色

可以通过颜色名称，RGB值或十六进制值来设置轮廓线的颜色。

示例：

点线轮廓

虚线轮廓

实线轮廓

效果图：

轮廓线的宽度

可以通过以px，cm，pt等单位指定宽度的大小或使用thin，thick， medium等关键字来设置轮廓的宽度。

示例：

点线轮廓

虚线轮廓

实线轮廓

双线轮廓

效果图：

更多前端开发知识，请查阅 HTML中文网 ！！