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

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


当前回答

边框与轮廓的区别:

Border是box模型的一部分,因此它与元素的大小相关。 Outline不是box模型的一部分,所以它不会影响附近的元素。

演示:

#{边境 边框:10px纯黑色; } #{轮廓 轮廓:10px纯黑色; } < html > <身体> <span id="border"> border </span>其他文本<br><br> <span id="outline"> outline </span>其他文本 < /身体> < / html > 其他的差异: 大纲显示在边框之外。 轮廓不能有圆角;边界。

其他回答

Border是在元素内部创建的,而outline是在元素外部创建的。因此,border与元素的宽度和高度一起计算,而outline绘制在元素外部。

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

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

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

摘自W3Schools:

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

来自W3学校网站

CSS边框属性允许您指定元素边框的样式和颜色。

轮廓线是在元素周围(边界外)画的线,使元素“突出”。

大纲简写属性在一个声明中设置所有大纲属性。

可以设置的属性依次为:outline-color, outline-style, outline-width。

如果上面的一个值缺失,例如。"outline:solid #ff0000;",如果有,将插入缺失属性的默认值。

点击这里查看更多信息: http://webdesign.about.com/od/advancedcss/a/outline_style.htm

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

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

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