浅谈轮廓属性outline（2） — outline一般使用

浅谈轮廓属性outline（1） — outline属性介绍

浅谈轮廓属性outline（2） — outline一般使用

浅谈轮廓属性outline（3） — outline使用技巧

本章就说一下outline的一般使用。

一、outline-width：在各个浏览器上显示的都一样

代码如下：

<div style="outline:thin solid #333;">outline:thin solid #333;-----thin=1px</div>
<div style="outline:medium solid #333;">outline:medium solid #333;-----medium=3px</div>
<div style="outline:thick solid #333;">outline:thick solid #333;-----thick=5px</div>
<div style="outline:10px solid #333;">outline:10px solid #333;-----10px</div>

截图如下：

1、thin–边框宽度为1px

2、medium–边框宽度3px

3、thick–边框宽度为5px

4、length–看你设置多少

二、outline-color，在各个浏览器上显示的都一样

代码如下：

<div style="outline:5px solid cadetblue;">outline:5px solid cadetblue;-----color_name</div>
<div style="outline:5px solid #ffb400;">outline:5px solid #ffb400;-----hex_number</div>
<div style="outline:5px solid rgb(215,23,136);">outline:5px solid rgba(215,23,136,0.2);-----rgb_number</div>
<div style="outline:solid 5px;">outline:solid 5px;-----invert</div>

截图如下：

三、outline-style：这个属性在各个浏览器上显示的不一样，看看下方的截图就知道了

代码如下：

<div style="outline:5px none #dd524d;">outline:5px none #dd524d;-----none无轮廓（默认）</div>
<div style="outline:5px dotted #dd524d;">outline:5px dotted #dd524d;-----dotted点状轮廓</div>
<div style="outline:5px dashed #dd524d;">outline:5px dashed #dd524d;-----dashed虚线轮廓</div>
<div style="outline:5px solid #dd524d;">outline:5px solid #dd524d;-----solid实线轮廓</div>
<div style="outline:5px double #dd524d;">outline:5px double #dd524d;-----double双线轮廓</div>
<div style="outline:5px groove #dd524d;">outline:5px groove #dd524d;-----groove-3D凹槽轮廓</div>
<div style="outline:5px ridge #dd524d;">outline:5px ridge #dd524d;-----ridge-3D凸槽轮廓</div>
<div style="outline:5px inset #dd524d;">outline:5px inset #dd524d;-----inset-3D凹边轮廓</div>
<div style="outline:5px outset #dd524d;">outline:5px outset #dd524d;-----outset-3D凸边轮廓</div>

截图如下：

四、inherit从父元素继承，就是直接复制他父级的所有outline的设置

<div style="outline:5px double #dd524d;">
    <div style="outline: inherit;">outline: inherit;-----inherit继承父元素属性设置</div>
</div>

这儿属性只能复制他父亲的，如果父级没有样式就不能继承。

文章所使用的demo-》outline的一般使用demo