CSS的outline和border属性有什么区别?

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

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

当前回答

除了其他答案，概要通常用于调试。Opera有一些很好的用户CSS样式，它们使用outline属性来显示文档中所有元素的位置。

如果您试图找出一个元素为什么没有出现在您期望的位置或没有出现在您期望的大小，添加一些轮廓并查看元素的位置。

正如前面提到的，轮廓不会占用空间。添加边框时，元素在文档中的总宽/高会增加，但outline不会发生这种情况。你也不能在特定的边设置轮廓，比如边界;要么全有，要么全无。

其他回答

来自W3学校网站

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

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

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

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

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

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

作为一个使用“outline”的实际示例，系统后面模糊的虚线边界集中在一个网页上(例如。可以使用outline属性来控制(至少，我知道它可以在Firefox中，没有尝试过其他浏览器)。

一种常见的“图像替换”技术是使用，例如:

<div id="logo"><a href="/">Foo Widgets Ltd.</a></div>

在CSS中:

#logo
{
    background: url(/images/logo.png) center center no-repeat;
}
#logo a
{
    display: block;
    text-indent: -1000em;
}

问题是当焦点到达标签时，轮廓会向左偏移1000em。Outline可以让您关闭这些元素的焦点轮廓。

我相信IE开发者工具栏在“选择”模式下突出显示要检查的元素时，也使用了一些类似“隐藏”的东西。这很好地说明了“提纲”不占空间的事实。

边框与轮廓的区别:

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

演示:

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

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

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

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

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

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

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

推荐文章