CSS中边框和轮廓属性的区别是什么?

如果没有区别,为什么同一事物有两种性质?


当前回答

摘自W3Schools:

定义和用法 轮廓是画出来的一条线 在元素周围(边界之外) 让元素“脱颖而出”。

其他回答

CSS中的outline属性在元素的外部画一条线。它和border很相似,只是:

它总是围绕所有的边,你不能指定具体的 它不是盒子模型的一部分,所以它不会影响 元素或相邻元素的位置

来源:https://css-tricks.com/almanac/properties/o/outline/

谷歌web.dev对盒子模型有一个很好的解释。

边框框围绕填充框,其空间由边框值占用。边界框是方框的边界,边界边缘是视觉上可以看到的范围。border属性用于可视化地为元素设置框架。

边距框,是你的方框周围的空间,由方框的边距规则定义。轮廓和框影等属性也占用了这个空间,因为它们被绘制在顶部,所以它们不会影响框的大小。你可以在我们的盒子上设置一个200px的轮廓宽度,包括边框在内的所有东西都将是完全相同的大小。

摘自W3Schools:

定义和用法 轮廓是画出来的一条线 在元素周围(边界之外) 让元素“脱颖而出”。

大纲的实际应用涉及透明度。如果你有一个带有背景的父元素,但是想让子元素的边框透明,这样父元素的背景就能显示出来,你必须使用“outline”而不是“border”。虽然边框可以是透明的,但它将显示子元素的背景,而不是父元素的背景。

换句话说,这种设置产生了以下效果:

outline: 7px solid rgba(255, 255, 255, 0.2);

这是一个有点老的问题,但值得一提的是Firefox渲染错误(直到1月13日仍然存在),即大纲将在所有子元素的外部渲染,即使它们溢出了父元素(通过负边距,框阴影等)。

你可以用以下方法解决这个问题:

.container {
    position: relative;
}
.container:before {
   content: '';
   margin: 0;
   padding: 0;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   outline: 1px solid #ff0000;
}

非常不幸的是,它仍然没有修复。在许多情况下,我更喜欢轮廓,因为它们不会增加元素的尺寸,从而使您在设置元素尺寸时不必总是考虑边界宽度。

毕竟,哪个更简单?

.container {
    width: 960px;
    height: 300px;
    outline: 3px solid black;
}

Or:

.container {
    width: 954px;
    height: 294px;
    border: 3px solid black;
}