CSS 轮廓属性outline设置,实例在线
outline轮廓属性
什么是HTML元素的轮廓?实际上就是围绕在元素周围、边框之外的一条线,就像图像处理软件中对图层的一个描边设计。在CSS层叠样式中,outline属性可以用于设置HTML元素的轮廓,语法如下:
outline: linewidth linestyle linecolor;
提示:这是CSS设置元素轮廓属性的简写方式;
参数 | 值 | 描述 |
---|---|---|
linewidth | px、pt、cm、em或预定义的值,如thin、medium、thick等 | 轮廓宽度 |
linestyle | 预定义的值,如solid、dotted、dashed等(具体见下一章节) | 轮廓线的样式 |
linecolor | rgb、hex、hsl或预定义颜色名等 | 轮廓颜色 |
outline实例代码,及在线编辑器
<p class='olp'>段落p,轮廓为橙色,下方的input点击之后将显示轮廓样式。</p>
<input type='text' class='oli'></p>
<style>
.olp{outline:1px solid orange;}
.oli:focus{outline:2px solid skyblue;}
</style>