CSS Outline轮廓

所谓轮廓就元素边框（Border）之外的线。其目的就是让该元素更加显目。

CSS中与outline相关的属性如下：

• outline-style
• outline-color
• outline-width
• outline-offset
• outline

Outline轮廓和Borders轮廓是有很大区别的。其中最大的区别是Outline轮廓不归属于元素的一部分，而只是环绕着元素。因此，Outline不会影响元素的高度和宽度，而且轮廓因为不是元素一部分，所以轮廓部分有可能将其他元素的显示部分覆盖。

---

Outline Style

CSS中的outline-style属性可以定义元素的outline的样式：

outline-style	说明	示例
dotted	定义出由圆点构成的虚线轮廓	A dotted outline.
dashed	定义出有短实线构成的虚线轮廓	A dashed outline.
solid	定义出实线轮廓	A solid outline.
double	定义出双线轮廓	A double outline.
groove	定义出内凹效果的实线轮廓（效果受outline-color影响）	A groove outline.
ridge	定义出外凸效果的实线轮廓（效果受outline-color影响）	A ridge outline.
inset	定义出内嵌效果的轮廓（效果受outline-color影响）	An inset outline.
outset	定义出外凸效果的轮廓（效果受outline-color影响）	An outset outline.
none	不设置轮廓	No outline.
hidden	定义一个隐藏的轮廓	A hidden outline.

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;}

运行一下

---

必须要设置outline-style属性，否则其他outline的属性不会生效。

---

Outline 颜色

CSS中的outline-color属性是用来设置轮廓的颜色，该属性可取值：

• 颜色名 - 用HTML颜色名来定义，类似Red、Yellow、Tomato等；
• RGB - 使用rgb或者rgba的方式来定义，比如rgb(255,0,0)或rgba(255,0,0,0.2)；
• HEX - 使用hex类型的颜色取值，如#46acb6；
• invert - 使用元素背景颜色的反差色，而实际取色则等同于元素的color属性取值。

案例1 （outline-color正常的颜色取值示例）

p.ex1 {
    border: 1px solid Black;
    outline-style: solid;
    outline-color: Tomato;
}

p.ex2 {
    border: 1px solid Black;
    outline-style: double;
    outline-color: #46acb6;
}

p.ex3 {
    border: 1px solid Black;
    outline-style: outset;
    outline-color: rgb(212, 219, 84);
}

运行一下

案例2 （outline-color取值invert，等同于轮廓取色与文本颜色一致）

p.ex1 {
    color: Tomato;
    border: 1px solid Black;
    outline-style: solid;
    outline-color: invert;
}

运行一下

Outline 宽度

CSS中outline-width属性用来定义轮廓的宽度（即轮廓线粗细），该属性可取值：

• thin （等价于 1px）
• medium （等价于 3px）
• thick （等价于 5px）
• 自定义取值，数值加单位即可（单位可以是px，pt，cm，em等）

上述四种类型取值，如下例所示：

p.ex1 {
    border: 1px solid black;
    outline-style: solid;
    outline-color: #46acb6;
    outline-width: thin;
}

p.ex2 {
    border: 1px solid black;
    outline-style: solid;
    outline-color: #46acb6;
    outline-width: medium;
}

p.ex3 {
    border: 1px solid black;
    outline-style: solid;
    outline-color: #46acb6;
    outline-width: thick;
}

p.ex4 {
    border: 1px solid black;
    outline-style: solid;
    outline-color: #46acb6;
    outline-width: 4px;
}

运行一下

使用outline属性进行通吃

洒家是个懒和尚，因此洒家决定只用outline属性同时达到如下三者属性的效果：

• outline-style（必须的）
• outline-color
• outline-width

根据上述三类属性取值，outline属性可以只声明一类值，也可以声明两类或者三类值；声明值的顺序是无所谓的，但是至少要声明过outline-style的取值才能使之有效。

案例如下，汝自己试试，贫僧就不多说啦：

p.ex1 {outline: dashed;}
p.ex2 {outline: dotted Tomato;}
p.ex3 {outline: 5px solid rgb(212, 219, 84);}
p.ex4 {outline: thick ridge #46acb6;}

运行一下

Outline Offset

CSS中的outline-offset属性的取值一般是数值加单位，诸如15px这样，其定义的是轮廓（outline）与边界（border）之间的空白透明间距，取值即为该空白间距的宽度。

p {
    margin: 30px;
    background: #eef8f8;
    border: 1px solid #46acb6;
    outline: 1px solid Tomato;
    outline-offset: 15px;
}

运行一下