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

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

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

当前回答

来自W3学校网站

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

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

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

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

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

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

2009-07-21 11:03:59

其他回答

这是一个有点老的问题，但值得一提的是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;
}

2013-01-04 22:12:28

除了一些其他的答案之外……以下是我能想到的更多不同之处:

1)圆角

Border使用Border -radius属性支持圆角。大纲没有。

div { width: 150px; height: 150px; margin: 20px; display: inline-block; position: relative; } .border { border-radius: 75px; border: 2px solid green; } .outline { outline: 2px solid red; border-radius: 75px; -moz-outline-radius: 75px; outline-radius: 75px; } .border:after { content: "border supports rounded corners"; position: absolute; bottom: 0; transform: translateY(100%); } .outline:after { content: "outline doesn't support rounded corners"; position: absolute; bottom: 0; transform: translateY(100%); } <div class="border"></div> <div class="outline"></div>

小提琴

(注意:虽然firefox有-moz-outline-radius属性，允许在轮廓上使用圆角…此属性在任何CSS标准中都没有定义，其他浏览器也不支持(源代码))

2)只做一面造型

Border具有属性，可以用Border -top:、Border -left:等来设置每条边的样式。

大纲不能这样做。没有大纲等等。要么全有，要么全无。(见这篇SO帖子)

3)抵消

Outline支持使用Outline -offset属性的偏移量。边界不。

.outline { 保证金:100 px; 宽度:150 px; 身高:150 px; outline-offset: 20 px; 轮廓:2px实心红色; 边框:2px纯绿色; 背景:粉色; ｝ < div class = "大纲" > < / div >

小提琴

注意:除Internet Explorer外，所有主流浏览器都支持outline-offset

2013-12-05 11:17:54

同样值得注意的是，W3C的大纲是IE的边界，因为IE没有实现W3C的盒子模型。