CSS轮廓outline cssoutline|CSS2

本文概述

边框和轮廓之间的区别
轮廓偏移

CSS轮廓就像CSS边框属性一样。它有助于你在元素周围绘制额外的边框以获得视觉关注。
它就像边框一样容易。
请参阅以下示例：

< !DOCTYPE html> < html> < style type="text/css"> .box { background-color: #eee; outline: 3px solid red; border: 3px solid lightgreen; padding: 5px 10px; } < /style> < div class="box"> Welcome to srcmini< /div> < /body> < /html>

边框和轮廓之间的区别乍一看, 边框和轮廓看起来很相似, 但是它们之间有一些非常重要的区别：

在边框中时, 不可能为元素的四个侧面应用不同的轮廓宽度, 样式和颜色；你可以将提供的值应用于元素的所有四个侧面。
边框是元素尺寸的一部分, 而轮廓线不是元素尺寸的一部分。就是说, 将轮廓应用于元素的粗细并不重要, 其尺寸不会改变。

outline属性是一种简写属性。它可以分为轮廓宽度, 轮廓样式和轮廓颜色属性。如果需要, 它可以帮助你单独使用任何属性。
请参阅以下示例：

< !DOCTYPE html> < html> < style type="text/css"> .box { 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 srcmini< /div> < /body> < /html>

在上面的示例中, 你可以看到三个大纲属性：
轮廓宽度：类似于边距和填充。它可以是绝对值或相对值, 也可以是预定义的轮廓宽度值之一, 即薄, 中或厚。最好使用绝对值或相对值, 因为不同的浏览器在使用预定义的轮廓宽度值（例如, 细, 中或粗）时会做出不同的解释。
轮廓颜色：指定你用于轮廓的颜色。它支持HTML和CSS中所有可用的颜色。
轮廓样式：在上面的示例中, 我们仅使用了实体轮廓样式, 而有很多轮廓样式, 即隐藏, 虚线, 虚线, 实体, 双线, 凹槽, 山脊, 插入和起始。
让我们以一个示例来演示不同轮廓样式的用法。
【CSS轮廓outline】请参阅以下示例：

< !DOCTYPE html> < html> < style type="text/css"> .box { outline-color: red; outline-width: 4px; margin: 10px; float: left; 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>

轮廓偏移轮廓偏移用于创建轮廓和边框之间的距离。
它采用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 srcmini< /div> < /body> < /html>