html 边框轮廓,CSS Outline(轮廓)

CSS Outline(轮廓)

(outline)轮廓线是在元素(例如按钮，活动表单域等)的边框边缘外部绘制的一条线，以使其突出。

轮廓(Outline) VS 边框(Border)

轮廓通常用于突出显示元素。轮廓一眼看上去与边框非常相似，但在以下方面与边框有所不同：轮廓不占用空间，因为它们始终放置在元素框的顶部，这可能导致它们与页面上的其他元素重叠。

与边框不同，轮廓不允许我们将每个边缘设置为不同的宽度，也不能为每个边缘设置不同的颜色和样式。轮廓在所有方面都是相同的。

轮廓除了重叠之外，对周围的元素没有任何影响。

与边框不同，轮廓不会更改元素的大小或位置。

轮廓可能不是矩形的。

注意：如果将轮廓放在元素上，则它将在网页上占用相同的空间，就好像您对该元素没有轮廓一样。

outline-width 轮廓宽度属性

outline-width属性指定要添加到元素上的轮廓的宽度。它的值应该是一个CSS长度(px，pt，em等)或允许的关键字之一，但百分比或负值是不允许的。就像border-width财产一样。

示例p {

outline-width: thick;

}测试看看‹/›

注意：如果outline-width缺少或未指定的值，则将使用的默认值(medium)代替。

outline-style 轮廓样式的属性

该outline-style属性设置样式轮廓，如：solid，dotted等等。

该属性可采取以下值之一：none，hidden，dashed&