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

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


当前回答

来自W3学校网站

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

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

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

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

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

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

其他回答

摘自W3Schools:

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

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

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

作为一个使用“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开发者工具栏在“选择”模式下突出显示要检查的元素时,也使用了一些类似“隐藏”的东西。这很好地说明了“提纲”不占空间的事实。

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

在w3c box模型中,边框与元素的宽度和高度无关。在IE中,它是包容性的。

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

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

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