上查看所有课程
CSS的 outline 属性用于在元素的边框外部绘制一条线。例如，
h1 {
border: 10px solid black;
outline: 10px solid orange;
}浏览器输出
这里，outline 属性在 h1 元素的边框外部添加了一条 10px 的实线橙色边框。
outline 属性具有以下相关属性：
outline-style：指定轮廓的样式outline-width：指定轮廓的宽度outline-color：指定轮廓的颜色outline：一个简写属性，用于同时指定outline-style、outline-width和outline-color
我们将在下面简要介绍每个属性。
CSS outline-style 属性
outline-style 属性用于指定元素轮廓的样式。
outline-style 属性的可能值如下：
solid：创建一条实线轮廓dotted：创建由点组成的轮廓dashed：创建由虚线组成的轮廓double：创建两条平行线的轮廓groove：创建具有雕刻感 3D 效果的轮廓ridge：创建具有浮雕感 3D 效果的轮廓inset：创建具有凹陷感 3D 效果的轮廓outset：创建具有凸起感 3D 效果的轮廓none：不显示轮廓hidden：轮廓被隐藏
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS outline-style</title>
</head>
<body>
<p class="solid">outline-style: solid;</p>
<p class="dotted">outline-style: dotted;</p>
<p class="dashed">outline-style: dashed;</p>
<p class="none">outline-style: none;</p>
<p class="hidden">outline-style: hidden;</p>
</body>
</html>/* creates a solid outline */
p.solid {
outline-style: solid;
}
/* creates a dotted outline */
p.dotted {
outline-style: dotted;
}
/* creates a dashed outline */
p.dashed {
outline-style: dashed;
}
/* no outline is created */
p.none {
outline-style: none;
}
/* hides the outline */
p.hidden {
outline-style: hidden;
}
/* adds 8px padding to all p */
p {
padding: 8px;
}浏览器输出
上面的示例展示了 outline-style 属性不同值的输出。
注意：outline-style: none 和 outline-style: hidden 的区别在于，none 完全移除轮廓，而 hidden 隐藏轮廓但仍占用空间。
outline-style: hidden 更受推荐，因为它还可以保持元素的焦点并增强可访问性。
CSS outline-width 属性
outline-width 属性用于指定轮廓的宽度。
outline-width 属性值可以用长度单位（如 px、pt 等）指定，或者使用关键字 thin、medium 和 thick 指定。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS outline-width</title>
</head>
<body>
<p class="first">outline-width: 4px;</p>
<p class="second">outline-width: 8px;</p>
</body>
</html>p {
padding: 8px;
outline-style: solid;
}
p.first {
outline-width: 4px;
}
p.second {
outline-width: 8px;
}浏览器输出
注意：为了让其他所有与轮廓相关的属性正常工作，我们需要指定 outline-style 属性。
CSS outline-color 属性
outline-color 属性用于指定元素轮廓的颜色。
outline-color 属性的值可以用任何颜色格式指定，例如颜色名称、HEX、HSL 和 RGB。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS outline-color</title>
</head>
<body>
<p class="first">outline-color: blue;</p>
<p class="second">outline-color: orange;</p>
</body>
</html>p {
outline-style: solid;
outline-width: 8px;
padding: 8px;
}
p.first {
outline-color: blue;
}
p.second {
outline-color: orange;
}浏览器输出
CSS outline 简写属性
outline 简写属性用于在单个声明中指定 outline-style、outline-width 和 outline-color 属性。
简写 outline 属性的语法如下：
outline: outline-width outline-style outline-color inherit;让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS outline</title>
</head>
<body>
<p>
This paragraph has a solid outline of 10px width and having orange
color.
</p>
</body>
</html>p {
outline: 10px solid orange;
padding: 8px;
}浏览器输出
在上面的例子中：
outline: 10px solid orange;等同于：
outline-style: solid;
outline-width: 10px;
outline-color: orange;简写 outline 属性至少需要 outline-style 值才能工作。
注意:
outline属性与border属性不同，尽管它接受与边框相同的属性并产生类似输出。
- 与
border属性不同，outline属性没有为元素的各个侧面提供轮廓的属性。
例如，我们可以为每个侧面提供边框，如border-top、border-right等，但我们不能为每个侧面提供像 outline-top 或 outline-right 这样的轮廓。 - 与
border属性不同，outline属性不是盒模型的一部分。因此，轮廓的宽度不会影响元素的大小（宽度或高度）。