轮廓是绘制于元素周围的线条，位于边框边缘的外围，可起到突出元素的作用。那么如何设置元素的轮廓样式？下面本篇文章就来给大家介绍一下使用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 值。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p {border: 1px solid red;}
p.dotted {outline: dotted;}
p.dashed {outline: dashed;}
p.solid {outline: solid;}
p.double {outline: double;}
p.groove {outline: groove;}
p.ridge {outline: ridge;}
p.inset {outline: inset;}
p.outset {outline: outset;}
</style>
</head>
<body>
<p class="dotted">点线轮廓</p>
<p class="dashed">虚线轮廓</p>
<p class="solid">实线轮廓</p>
<p class="double">双线轮廓</p>
<p class="groove">凹槽轮廓</p>
<p class="ridge">垄状轮廓</p>
<p class="inset">嵌入轮廓</p>
<p class="outset">外凸轮廓</p>
</body>
</html>
效果图：
轮廓线的颜色
可以通过颜色名称，RGB值或十六进制值来设置轮廓线的颜色。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p {border: 1px solid black;}
p.dotted {outline: dotted pink;}
p.dashed {outline: dashed #007AFF;}
p.solid {outline: solid rgba(228,77,119);}
</style>
</head>
<body>
<p class="dotted">点线轮廓</p>
<p class="dashed">虚线轮廓</p>
<p class="solid">实线轮廓</p>
</body>
</html>
效果图：
轮廓线的宽度
可以通过以px，cm，pt等单位指定宽度的大小或使用thin，thick， medium等关键字来设置轮廓的宽度。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p {border: 1px solid black;}
p.dotted {outline:5px dotted pink;}
p.dashed {outline:thin dashed #007AFF;}
p.solid {outline:thick solid rgba(228,77,119);}
p.double {outline:medium double palegreen;}
</style>
</head>
<body>
<p class="dotted">点线轮廓</p>
<p class="dashed">虚线轮廓</p>
<p class="solid">实线轮廓</p>
<p class="double">双线轮廓</p>
</body>
</html>
效果图：
更多前端开发知识，请查阅 HTML中文网 ！！
