CSS 轮廓

轮廓是在边界外围绕元素绘制的一条线，以使元素“突出”。

CSS 具有以下轮廓属性：

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

轮廓与边框不同！轮廓是绘制在元素边框之外，并且可能与其他内容重叠。此外，大纲不是元素尺寸的一部分;元素的总宽度和高度不受轮廓宽度的影响。

轮廓样式：

• dotted- 定义虚线轮廓
• dashed- 定义虚线轮廓
• solid- 定义实心轮廓
• double- 定义双重轮廓
• groove- 定义 3D 凹槽轮廓
• ridge- 定义 3D 脊状轮廓
• inset- 定义 3D 插图轮廓
• outset- 定义 3D 开始轮廓
• none- 不定义轮廓
• hidden- 定义隐藏轮廓

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属性，否则其他轮廓属性（您将在下一章中详细介绍）都不会产生任何影响！

CSS 轮廓宽度

outline-width属性指定轮廓的宽度， 并且可以具有以下值之一：

• 细（通常为 1px）
• 中（通常为 3px）
• 厚（通常为 5px）
• 特定尺寸（像素、磅、厘米、全角等）

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

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

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

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

CSS 轮廓颜色

outline-color属性用于设置轮廓的颜色。

颜色可以通过以下方式设置：

• 名称 - 指定颜色名称，如“红色”
• 十六进制 - 指定十六进制值，如“#ff0000”
• RGB - 指定一个 RGB 值，如“rgb（255,0,0）”
• HSL - 指定一个 HSL 值，如“HSL（0， 100%， 50%）”
• 反转 - 执行颜色反转（确保轮廓可见，无论颜色背景如何）

下面的示例显示了具有不同颜色的一些不同轮廓。 另请注意，这些元素在轮廓内也有一条细黑色边框：

p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: red;
}

p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: blue;
}

p.ex3 {
  border: 2px solid black;
  outline-style: outset;
  outline-color: grey;
}
p.ex4 {
  outline-style: solid;
  outline-color: #ff0000; /* red */
}
p.ex5 {
  outline-style: solid;
  outline-color: rgb(255, 0, 0); /* red */
}
p.ex6 {
  outline-style: solid;
  outline-color: hsl(0, 100%, 50%); /* red */
}

CSS轮廓简写

outline属性是设置以下单独的大纲属性：

• outline-width
• outline-style（必填）
• outline-color
outline属性被指定为 上面列表中的一个、两个或三个值。值的顺序不是必要的。

p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}

CSS 轮廓偏移

outline-offset属性在轮廓和元素的边缘/边框之间增加了空间。元素及其轮廓之间的空间是透明的。

下面的示例指定边框边缘外 15px 的轮廓：

p {
  margin: 30px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}

下面的示例演示元素与其轮廓之间的间距是透明的：

p {
  margin: 30px;
  background: yellow;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}