前端必知必会-CSS Outline轮廓

---

CSS Outline轮廓

轮廓Outline是在元素边框外绘制的一条线。
轮廓是在元素周围绘制的一条线，位于边框之外，以使元素“突出”。

CSS 具有以下轮廓属性：

• outline-style 轮廓样式
• outline-color 轮廓颜色
• outline-width 轮廓宽度
• outline-offset 轮廓偏移
• outline

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

CSS 轮廓样式outline-style

outline-style 属性指定轮廓的样式，可以具有以下值之一：

• dotted - 定义虚线轮廓
• dashed - 定义虚线轮廓
• solid - 定义实线轮廓
• double - 定义双轮廓
• groove - 定义 3D 凹槽轮廓
• ridge - 定义 3D 脊状轮廓
• inset - 定义 3D 插入轮廓
• outset - 定义 3D 突出轮廓
• none - 定义无轮廓
• hidden - 定义隐藏轮廓
  以下示例显示了不同的 outline-style 值：

示例
不同轮廓样式的演示：

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

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

• thin（通常为 1px）
• medium（通常为 3px）
• thick（通常为 5px）
• 特定大小（以 px、pt、cm、em 等为单位）

以下示例显示了一些具有不同宽度的轮廓

示例

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

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

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

• name - 指定颜色名称，如“red”
• HEX - 指定十六进制值，如“#ff0000”
• RGB - 指定 RGB 值，如“rgb(255,0,0)”
• HSL - 指定 HSL 值，如“hsl(0, 100%, 50%)”
• invert - 执行颜色反转（确保轮廓可见，无论背景颜色如何）
  以下示例显示了一些具有不同颜色的不同轮廓。还请注意，这些元素在轮廓内也有一条细黑边框：

示例

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

HEX 值
轮廓颜色也可以使用十六进制值 (HEX) 指定：

示例

p.ex1 {
outline-style: solid;
outline-color: #ff0000; /* red */
}

RGB 值
或者使用 RGB 值：

示例

p.ex1 {
outline-style: solid;
outline-color: rgb(255, 0, 0); /* red */
}

HSL 值
您还可以使用 HSL 值：

示例

p.ex1 {
outline-style: solid;
outline-color: hsl(0, 100%, 50%); /* 红色 */
}

CSS outline简写属性

轮廓属性是用于设置以下单个轮廓属性的简写属性：

• 轮廓宽度outline-width
• 轮廓样式（必需）outline-style
• 轮廓颜色outline-color
  轮廓属性指定为上面列表中的一个、两个或三个值。值的顺序无关紧要。

示例

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

CSS 轮廓偏移Offset

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

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

此段落的轮廓位于边框边缘外 15px。

示例

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

以下示例显示元素与其轮廓之间的空间是透明的：

此段落的轮廓位于边框边缘外 15px。

示例

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

---

总结

本文介绍了的CSS Outline轮廓使用，如有问题欢迎私信和评论