一、CSS 轮廓（outline 属性）

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

CSS outline 属性规定元素轮廓的样式、颜色和宽度。

二、属性

2.1 outline-style 属性

设置轮廓的样式

none默认。定义无轮廓。
dotted定义点状的轮廓。
dashed定义虚线轮廓。
solid定义实线轮廓。
double定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset定义 3D 凸边轮廓。此效果取决于 outline-color 值。
inherit规定应该从父元素继承轮廓样式的设置。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            p {
                border: red solid thin;
            }
            
            p.none{
                outline-style: none
            }
            
            p.dotted {
                outline-style: dotted
            }
            
            p.dashed {
                outline-style: dashed
            }
            
            p.solid {
                outline-style: solid
            }
            
            p.double {
                outline-style: double
            }
            
            p.groove {
                outline-style: groove
            }
            
            p.ridge {
                outline-style: ridge
            }
            
            p.inset {
                outline-style: inset
            }
            
            p.outset {
                outline-style: outset
            }
        </style>
    </head>

    <body>
        <p class="none">定义无轮廓。</p>
        <p class="dotted">定义点状的轮廓。</p>
        <p class="dashed">定义虚线轮廓。</p>
        <p class="solid">定义实线轮廓。</p>
        <p class="double">定义双线轮廓。双线的宽度等同于 outline-width 的值。</p>
        <p class="groove">定义 3D 凹槽轮廓。此效果取决于 outline-color 值。</p>
        <p class="ridge">定义 3D 凸槽轮廓。此效果取决于 outline-color 值。</p>
        <p class="inset">定义 3D 凹边轮廓。此效果取决于 outline-color 值。</p>
        <p class="outset">定义 3D 凸边轮廓。此效果取决于 outline-color 值。</p>
    </body>
</html>

2.2 outline-color 属性

设置轮廓的颜色。

注释：请始终在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。 注释：轮廓线不会占据空间，也不一定是矩形。 outline-color 属性设置一个元素整个轮廓中可见部分的颜色。要记住，轮廓的样式不能是 none，否则轮廓不会出现。

<!DOCTYPE html>
<!--
    作者：2584966199@qq.com
    时间：2020-03-17
    描述：
    outline-color 属性设置一个元素整个轮廓中可见部分的颜色。要记住，轮廓的样式不能是 none，否则轮廓不会出现。
    请始终在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。
-->
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            p {
                border: red solid thin;
                outline-style: dotted;
                outline-color: #00ff00;
            }
        </style>
    </head>

    <body>
        <p><b>注释：</b>在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。</p>
    </body>
</html>

2.3 outline-width 属性

outline-width 属性设置元素整个轮廓的宽度，只有当轮廓样式不是 none 时，这个宽度才会起作用。如果样式为 none，宽度实际上会重置为 0。不允许设置负长度值。

outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。outline 属性设置元素周围的轮廓线。

注释：请始终在 outline-width 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。

注释：轮廓线不会占据空间，也不一定是矩形。

<!DOCTYPE html>
<!--
    作者：2584966199@qq.com
    时间：2020-03-17
    描述：
    outline-width 属性设置元素整个轮廓的宽度，
    只有当轮廓样式不是 none 时，这个宽度才会起作用。
    如果样式为 none，宽度实际上会重置为 0。不允许设置负长度值。
-->
<html>
    <head>
        <meta charset="UTF-8">
        <title>outline-width属性</title>
        <style>
            p.one {
                border: red solid thin;
                outline-style: solid;
                outline-width: thin;
            }
            
            p.two {
                border: red solid thin;
                outline-style: dotted;
                outline-width: 3px;
            }
        </style>
    </head>

    <body>
        <p class="one">这是一个实线轮廓</p>
        <p class="two">这是一个点状轮廓</p>
    </body>
</html>