CSS outline

CSS outline就像CSS  border 属性一样。它有助于您在元素周围绘制额外的边框以获得视觉关注。

请参阅以下示例：

Welcome to JavaTpoint

边框和轮廓之间的区别

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

• 处于边框中时，不可能为元素的四个侧面应用不同的轮廓宽度，样式和颜色。您可以将提供的值应用于元素的所有四个侧面。
• 边框是元素尺寸的一部分，而轮廓线不是元素尺寸的一部分。意味着，将轮廓应用于元素的粗细无关紧要，其尺寸不会改变。

outline属性是一种简写属性。它可以分为轮廓宽度，轮廓样式和轮廓颜色属性。如果需要，它可以帮助您单独使用任何属性。

请参阅以下示例：

Welcome to JavaTpoint

在上面的示例中，您可以看到三个大纲属性：

轮廓宽度：类似于边距和填充。它可以是绝对值或相对值，也可以是预定义的轮廓宽度值之一，即薄，中或厚。最好使用绝对值或相对值，因为在使用预定义的轮廓宽度值(例如，细，中或粗)时，不同的浏览器会做出不同的解释。

轮廓颜色：指定您用于轮廓的颜色。它支持HTML和CSS中所有可用的颜色。

轮廓样式：在上面的示例中，我们仅使用了实体轮廓样式，而有很多轮廓样式，例如隐藏，点缀，虚线，实心，双线，凹槽，山脊，插入和插入。

让我们以一个示例来演示不同轮廓样式的用法。

请参阅以下示例：

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长度单位，边框和轮廓之间的空白将是透明的，然后采用父元素的背景色。这样您就可以看到轮廓和边框之间的明显差异。

让我们来看一个例子，看看轮廓和边框之间的区别。

请参阅以下示例：

Welcome to JavaTpoint