轮廓与边框
轮廓和边框相似，但有很多不同之处。
如果我们可以在 border-radius 属性的帮助下使边框变圆，那么轮廓属性就不能变圆。
轮廓属性允许在元素周围创建多个边框。
轮廓不占用空间，因为它们在元素的内容之外。
| 初始值 | medium invert color |
|---|---|
| 应用于 | 所有元素。它还适用于::first-letter伪元素。 |
| 继承 | 无效 |
| 可动画的 | 是的。元素的轮廓是有动画的。 |
| 版本 | CSS2. |
| DOM 语法 | object.Style.outline ="#eee dashed 10px"; |
语法
outline: outline-width | outline-style | outline-color | initial | inherit;
轮廓属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
p.dotted {
outline: dotted;
}
p.dashed {
outline: dashed;
}
</style>
</head>
<body>
<h2>Outline 属性示例</h2>
<p class="dotted">生活终归还得继续。 </p>
<p class="dashed">生活终归还得继续。 </p>
</body>
</html>
结果
在给定的示例中，第一个元素的轮廓样式是虚线，而第二个元素的轮廓样式是虚线。
在下面的例子中，第一个元素没有边框，第二个元素有。
请注意，第二个元素的轮廓在其边框之外：
带有边框的元素的轮廓属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div.ex1 {
outline-style: solid;
outline-width: thick;
}
div.ex2 {
border: 1px solid #fc7f01;
outline-style: solid;
outline-width: thick;
}
</style>
</head>
<body>
<h2>Outline 属性示例</h2>
<div class="ex1">生活终归还得继续。 </div>
<br>
<div class="ex2">生活终归还得继续。 </div>
</body>
</html>
在以下示例中，轮廓位于第二个元素的边框之外。
带有轮廓样式属性的轮廓颜色属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div.blue {
outline-style: solid;
outline-color: #1c87c9;
}
div.green {
border: 1px solid black;
outline-style: solid;
outline-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Outline 属性示例</h2>
<div class="blue">生活终归还得继续。 </div>
<br>
<div class="green">生活终归还得继续。 </div>
</body>
</html>
轮廓是在边界外绘制的线。
各方面都是一样的。
轮廓属性是以下内容的简写：
- outline-width
- outline-style
- outline-color
如果单独使用 outline-color 属性将不起作用。
元素的宽度和高度不包括轮廓的宽度。
必须单独指定。
CSS outline 属性值说明
| 值 | 描述 |
|---|---|
| outline-width | 定义轮廓的宽度。 |
| outline-style | 定义轮廓的样式。 |
| outline-color | 设置轮廓的颜色。 |
| initial | 使属性使用其默认值。 |
| inherit | 从父母元素继承属性。 |
日期：2020-06-02 22:14:42 来源：oir作者：oir