大纲和边框CSS属性有什么区别?

发件人: http://webdesign.about.com/od/advancedcss/a/outline_style.htm

1. 轮廓不占用空间。

2. 轮廓可以是非矩形的。

除了其他一些答案。..以下是我能想到的一些差异:

1) 圆角

border 支持圆角 border-radius outline 不。

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>

FIDDLE

火狐 拥有 -moz-outline-radius 允许轮廓圆角的特性。..此属性在任何CSS标准中都没有定义,其他浏览器也不支持( source ))

border具有为每一侧设置样式的属性 border-top: , border-left: 等等

大纲不能做到这一点。没有轮廓顶部:等等。要么全有,要么全无。(参见 this SO post )

3) 偏移量

大纲支持使用属性进行偏移 outline-offset .bront没有。

.outline {
  margin: 100px;
  width: 150px;
  height: 150px;
  outline-offset: 20px;
  outline: 2px solid red;
  border: 2px solid green;
  background: pink;
}

<div class="outline"></div>

FIDDLE

outline-offset Internet Explorer除外

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

如果你想找出为什么一个元素没有出现在你期望的位置或大小,可以添加一些轮廓,看看元素在哪里。

如前所述,轮廓不占用空间。添加边框时,元素在文档中的总宽度/高度会增加,但轮廓不会发生这种情况。此外,您不能在特定侧面(如边框)设置轮廓;要么全有,要么全无。