肉渣教程

CSS Outline轮廓

上一节 下一节

CSS Outline轮廓

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

Outline(轮廓)
Border(边框)
Content(实际内容)


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等)

上述四种类型取值,如下例所示:

outline-width: thin;

outline-width: medium;

outline-width: thick;

outline-width: 4px;

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

运行一下


CSS Outline轮廓

上一节 下一节