我应该使用'border: none'还是'border: 0'？

Question

我应该使用'border: none'还是'border: 0'？

cssborder

634

这两种方法哪一种符合W3C标准？它们在不同的浏览器中都能如预期地工作吗？

border: none;
border: 0;

Note: 我已经尽力使翻译更加通俗易懂，但是由于技术术语的限制，有些内容仍可能需要读者具备一定的专业知识才能理解。

- John Himmelman

92

我喜欢这种被忽视的问题类型。 - Christopher Altman

12个回答

177

它们在效果上是等效的，只是指向不同的快捷方式：

border: 0;
//short for..
border-width: 0;

还有其他的...

border: none;
//short for...
border-style: none;

两个都可以，只需要选择其中一个然后使用就可以了 :)

- Nick Craver

6

请注意，"在零长度后，单位标识符是可选的"，因此 border: 0; 是有效的。 - Ishmael

61

@Dubs，你是认真的吗？你喜欢别人链接到w3schools吗？ - ajax333221

33

在对待 w3schools（或任何网站）时，要小心黑白分明的态度。 在这种情况下，说明很好，虽然我一般不喜欢他们，但他们对这个问题的解释是正确和简洁的。你可以自由地总体上讨厌他们，我也是，但不要假设那里的内容都没有用处，有些是有用的，甚至 Yahoo Answers 上的一些东西也有用，程度不同。 - Nick Craver

7

错误！如我在我的回答中所描述并在演示实例中展示的，border: 0不是border-width: 0的简写。相反，这个简写版本总是设置所有三个属性：border-color、border-style和border-width。 - Denilson Sá Maia

3

我说它们与答案的第一行在本质上是相同的，因为如果边框的宽度为0，则其他两个边框不重要。顺便提一下，CSS 2.1在此之后7个月进行了最后通话，澄清了这里的行为，并在一年多之后推荐使用。如果您想澄清旧答案，请这样做！鼓励编辑更新。 - Nick Craver

显示剩余5条评论

51

（注：本回答已于2014年8月1日更新，以使其更加详细、准确，并添加了live demo）

扩展简写属性

根据W3C CSS2.1规范（“省略的值被设置为它们的初始值”），以下属性是等效的：

border: hidden;    border-style: hidden;
                   border-width: medium;
                   border-color: <the same as 'color' property>

border: none;      border-style: none;
                   border-width: medium;
                   border-color: <the same as 'color' property>

border: 0;         border-style: none;
                   border-width: 0;
                   border-color: <the same as 'color' property>

如果这些规则是应用于元素边框的最具体规则，那么边框将不会显示，可能是因为宽度为零，也可能是因为使用了hidden/none样式。因此，乍一看，这三个规则看起来是等价的。但是，当与其他规则组合时，它们的行为是不同的。

在折叠边框模型下表格上下文中的边框

当使用border-collapse: collapse来渲染表格时，每个呈现的边框都在多个元素之间共享（内部边框在相邻单元格之间共享；外部边框在单元格和表格本身之间共享；还有行、行组、列和列组共享边框）。规范定义了一些有关边框冲突解决的规则：

具有边框样式为 hidden 的边框优先于所有其他冲突的边框。[...]

具有样式为 none 的边框优先级最低。[...]

如果没有任何样式为 hidden，并且其中至少一个不是 none，则窄边框将被放弃，以便更宽的边框。[...]

如果边框样式仅在颜色上不同，[...]

因此，在表格上下文中，border: hidden（或 border-style: hidden）具有最高优先级，并将隐藏共享边框，无论如何。

在优先级的另一端，border: none（或 border-style: none）具有最低优先级，其次是零宽度边框（因为它是最窄的边框）。这意味着 border-style: none 的计算值和 border-width: 0 的计算值本质上是相同的。

层叠规则和继承

由于none和0影响不同的属性（border-style和border-width），当一个更具体的规则仅定义样式或仅定义宽度时，它们的行为会有所不同。请参见Chris answer中的示例。

实时演示！

想在一个页面中看到所有这些情况吗？打开实时演示！

- Denilson Sá Maia

42

像其他人说的一样，两种方法都是有效的并且会起作用。但我并不完全相信它们是完全相同的。如果你有一些样式层叠，理论上它们可能会产生不同的结果，因为它们实际上覆盖了不同的值。

例如，如果您设置了"border: none;"，然后稍后有两个不同的样式来覆盖边框宽度和样式，那么一个会起作用而另一个则不会。

在以下示例中，在IE和Firefox上，前两个测试div没有边框。然而，后面的两个在第二个块中是不同的，第一个div是普通的，第二个div具有中等宽度的虚线边框。

因此，尽管这两种方法都是有效的，如果它们涉及到许多层叠样式等等的话，您可能需要注意您的样式。

<html>
<head>
<style>
div {border: 1px solid black; margin: 1em;}
.zerotest div {border: 0;}
.nonetest div {border: none;}

div.setwidth {border-width: 3px;}
div.setstyle {border-style: dashed;}

</style>
</head>
<body>

<div class="zerotest">
<div class="setwidth">
"Border: 0" and "border-width: 3px"
</div>
<div class="setstyle">
"Border: 0" and "border-style: dashed"
</div>
</div>

<div class="nonetest">
<div class="setwidth">
"Border: none" and "border-width: 3px"
</div>
<div class="setstyle">
"Border: none" and "border-style: dashed"
</div>
</div>

</body>
</html>

- Chris

1

为了在Sencha Touch 2中去除日期选择器的边框，我不得不使用border: none而不是border: 0。 - Kris Khaira

22

抱歉，我只能回答英文问题。

border: none;

在某些版本的IE中不起作用。IE9可以正常工作，但在以前的版本中，即使样式为"none"，它仍会显示边框。我在使用打印样式表时遇到了这个问题，因为我不希望在输入框上出现边框。

border: 0;

在所有浏览器中似乎都可以正常工作。

- Kieran

12

您可以根据Oli提供的规范，简单地同时使用它们。

我通常使用 border:0 none;。

虽然单独指定它们没有问题，并且某些浏览器如果您使用传统的CSS1属性调用，则会更快地解析CSS。

尽管 border:0; 通常将边框样式默认为 none，但我注意到某些浏览器会强制执行其默认边框样式，这可能会奇怪地覆盖 border:0;。

- Xenni82

1

一些浏览器会更快地解析CSS，但在99.999999999999％的情况下，CSS解析时间没有明显差异。实际上，CSS解析时间与这个问题无关，CSS渲染时间更为重要。 - Denilson Sá Maia

2

一些浏览器？你是什么意思？感觉像是梦境或者什么的。 - Rootical V.

7

我使用：

border: 0;

来自CSS 2.1中的8.5.4：

'border'

值： [ <边框宽度> || <边框样式> || <'border-top-color'> ] | 继承（inherit）

所以你的两种方法都可以。

- cletus

1

零点看起来和零实心一样。 - Christopher Altman

1

正确。但是，请参考克里斯的答案。 - Antony Hatchkins

6

好的，为了准确地看到border: 0和border: none之间的区别，我们可以进行一些实验。

实验：

让我们创建三个div，第一个div的边框只能通过将其宽度设置为零来禁用，第二个div只能通过将其样式设置为none来禁用，第三个div的边框只能通过将其颜色设置为透明来“禁用”。然后让我们尝试以下效果：

border: 0;
border: none;
border: transparent

border-style: solid!important; border-color: red!important; border-width: 2px!important; border-color: red!important; border-width: 2px!important; border-style: solid!important;

var container = document.querySelector('#container');
var btnSetZero = document.querySelector('#setZero');
var btnSetNone = document.querySelector('#setNone');
var btnSetTransparent = document.querySelector('#setTransparent');
var btnReset = document.querySelector('#reset');
btnSetZero.addEventListener('click', () => {
 container.className = "border-zero";
});

btnSetNone.addEventListener('click', () => {
 container.className = "border-none";
});

btnSetTransparent.addEventListener('click', () => {
 container.className = "border-transparent";
});

btnReset.addEventListener('click', () => {
 container.className = "";
});

div div {
  border: 2px solid red;
  margin: 2px;
  font-family: monospace;
  white-space: nowrap;
  width: 250px;
}

div.border-zero div {
  border: 0;
}
div.border-none div {
  border: none;
}
div.border-transparent div {
  border: transparent;
}

<div id="container">
  <div style="border-style: solid!important; border-color: red!important;">
    border-style: solid!important;<br>
    border-color: red!important;
  </div>
  <div style="border-width: 2px!important; border-color: red!important;">
    border-width: 2px!important;<br>
    border-color: red!important;
  </div>
  <div style="border-width: 2px!important; border-style: solid!important;">
    border-width: 2px!important;<br>
    border-style: solid!important;
  </div>
</div>

<button id="setZero">border: 0;</button>
<button id="setNone">border: none;</button>
<button id="setTransparent">border: transparent;</button>
<button id="reset">reset</button>

我的结果在火狐和谷歌浏览器中都相同： border: 0; 看起来将边框宽度设置为 0，边框样式设置为 none，但不改变边框颜色； border: none; 看起来只改变边框样式（改为 none）； border: transparent; 看起来将边框颜色改为 transparent，边框样式改为 none；

- Agesly Danzig

2

虽然结果很可能相同（无边框），但0和none在技术上是涉及不同的事情。

0表示边框宽度，而none表示边框样式。显然，宽度为0的边框不存在，因此也没有样式。

然而，如果稍后在样式表中要覆盖这一设置，您自然会具体指定其中之一。如果现在我想要一个3像素的边框，则直接覆盖边框宽度的border: 0。如果现在我想要一个点线状的边框，则直接覆盖边框样式的border: none。

- Carly

2

用CSS最简单的方法去掉边框

border: 0;

- Love Kumar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Oli · Accepted Answer

两种写法都是有效的。这是你的选择。

我更喜欢border:0，因为它更短，更容易阅读。你可能会觉得none更清晰易读。我们生活在一个非常有能力的CSS后处理器的世界中，所以我建议你使用任何你喜欢的方式，然后通过“压缩器”运行它。这里没有值得争论的圣战，但Webpack→LESS→PostCSS→PurgeCSS是一个不错的2020堆栈。

尽管评论中有抱怨，但如果你手写所有的生产CSS，我仍然认为注意带宽并不会有害。单独使用border:0确实可以节省微不足道的带宽，但如果你让每个字节都有用，你将使你的网站更快。

CSS2规范在这里。这些在CSS3中得到扩展，但与此无关。

'border'
    Value:      [ <border-width> || <border-style> || <'border-top-color'> ] | inherit
    Initial:    see individual properties
    Applies to:     all elements
    Inherited:      no
    Percentages:    N/A
    Media:      visual
    Computed value:     see individual properties

您可以使用任何宽度、样式和颜色的组合。
这里，0 设置宽度，none 设置样式。它们具有相同的渲染结果：什么也不显示。