CSS outline
CSS outline
CSS outline就像CSS边框属性一样。
请参见以下示例：
<!DOCTYPE html>
<html>
<style type="text/css">
.box {
width: 400px;
background-color: #eee;
outline: 3px solid red;
border: 3px solid lightgreen;
padding: 5px 10px;
}
</style>
<div class="box">Welcome to lidihuo</div>
</body>
</html>
输出：
Welcome to lidihuo
边框和轮廓之间的差异
乍一看，边框和轮廓看起来很相似，但是它们之间有一些非常重要的区别：
在边框中时，不可能为元素的四个侧面应用不同的轮廓宽度，样式和颜色；您可以将提供的值应用于元素的所有四个侧面。
边框是元素尺寸的一部分，而轮廓线不是元素尺寸的一部分。意思是，将轮廓应用于元素的粗细无关紧要，其尺寸不会改变。
outline属性是一种简写属性。它可以分为轮廓宽度，轮廓样式和轮廓颜色属性。如果需要，它可以方便您单独使用任何属性。
请参见以下示例：
<!DOCTYPE html>
<html>
<style type="text/css">
.box {
width: 400px;
background-color: #eee;
border: 3px solid Lightgreen;
padding: 5px 10px;
outline-width: 3px;
outline-style: solid;
outline-color: red;
}
</style>
<div class="box">Welcome to lidihuo</div>
</body>
</html>
输出：
Welcome to lidihuo
在上面的示例中，您可以看到三个轮廓属性：
轮廓宽度：它类似于边距和填充。它可以是绝对值或相对值，也可以是预定义的轮廓宽度值之一，即薄，中或厚。最好使用绝对值或相对值，因为在使用预定义的轮廓宽度值（例如，细，中或粗）时，不同的浏览器会做出不同的解释。
轮廓颜色：指定用于轮廓的颜色。它支持HTML和CSS中所有可用的颜色。
轮廓样式：在上面的示例中，我们仅使用了实心轮廓样式，而轮廓样式很多，例如hidden, dotted, dashed, solid, double, groove, ridge, inset and outset。
让我们以一个例子来演示不同轮廓样式的用法。这个例子：
<!DOCTYPE html>
<html>
<style type="text/css">
.box {
width: 400px;
outline-color: red;
outline-width: 4px;
margin: 10px;
border: 2px solid lightgreen;
padding: 5px 10px;
}
</style>
<div class="box" style="outline-style: dashed;">This is dashed outline.</div>
<div class="box" style="outline-style: dotted;">This is dotted outline.</div>
<div class="box" style="outline-style: double;">This is double outline.</div>
<div class="box" style="outline-style: groove;">This is groove outline.</div>
<div class="box" style="outline-style: inset;">This is inset outline.</div>
<div class="box" style="outline-style: outset;">This is outset outline.</div>
<div class="box" style="outline-style: ridge;">This is ridge outline.</div>
<div class="box" style="outline-style: solid;">This is solid outline.</div>
</body>
</html>
输出：
This is dashed outline.
This is dotted outline.
This is double outline.
This is groove outline.
This is inset outline.
This is outset outline.
This is ridge outline.
This is solid outline.
轮廓线偏移
轮廓线偏移用于创建轮廓线和边框之间的距离。
它使用CSS长度单位和空白边框和轮廓之间的空间将是透明的，然后采用父元素的背景色。这样您就可以看到轮廓和边框之间的可见差异。
让我们以一个示例来看一下轮廓和边框之间的差异。
请参见以下示例：
<!DOCTYPE html>
<html>
<style type="text/css">
.box {
background-color: #eee;
outline: 3px solid red;
outline-offset: 6px;
border: 3px solid Lightgreen;
padding: 5px 10px;
}
</style>
<div class="box">Welcome to lidihuo</div>
</body>
</html>
Welcome to lidihuo.