我应该使用“边界：无”还是“边界：0”？

543

两种方法中的哪一种符合W3C标准？它们在浏览器中的表现均符合预期吗？

边界：无；
边界：0;

css border

— 约翰·希梅尔曼
source

74

我喜欢这些类型的被忽略的问题。

— Christopher Altman 2010年

453

两者均有效。这是你的选择。

我喜欢，border:0因为它更短。我觉得这更容易阅读。您可能会发现none更清晰。我们生活在功能强大的CSS后处理器世界中，因此我建议您使用您喜欢的任何东西，然后通过“压缩机”运行它。这里没有值得战斗的圣战。

综上所述，如果您要手写所有生产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样式。它们具有相同的渲染结果：未显示任何内容。

— 奥利
source

117

“如果您的流量很大，您会注意到其中的不同！” -我对此表示高度怀疑。即使每小时有100万访问者，两者的差异也只有3MB。并假设这些访问者均未缓存CSS，还假设压缩提供了0收益，这两种陈述都是不太可能的。实际上，每天可能会有几百KB的差异，对于大型站点而言，基本上是0。我认为这并不是border:none更好，但是将其用作推理是错误的。

— BlueRaja-Danny Pflughoeft 2014年

22

@ BlueRaja-DannyPflughoeft比其他任何事情都更讽刺.....或者夸张...或者两者兼而有之。没错，除非您使用了数十亿次，并且互联网上的每个人都可以一次访问CSS，否则这可能永远不会对任何内容产生运行时影响。

— 奥利

6

也许值得在描述中增加该说法是讽刺性的？:)

— timofey.com 2014年

7

为了完整起见，我想添加另一个方面。传输1MB数据需要普通木炭块中包含的能量。请参阅Jay Walkers的TED演讲：player.vimeo.com/video/22399003。

— Zensursula

11

我是这里唯一一个多纳秒欢呼的人吗？

— Leathan

155

他们是等价的效果，指向不同的快捷方式：

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

和另一个..

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

两者都可以，只需选择一个然后就可以了:)

— 尼克Craver
source

5

另请注意，“零长度后，单位标识符是可选的”，因此border: 0;有效。

— Ishmael 2010年

59

@Dubs认真吗？，您喜欢人们链接到w3schools的时间吗？

— ajax333221 2011年

29

@ ajax333221-在那里对w3schools（或任何网站）持黑白态度要小心。 在这种情况下，说明很好，尽管我确实讨厌他们，但他们对这个问题的解释是正确的，也很简洁。您通常可以自由地憎恨它们，我也可以，但是不要假定其中0％的内容有用，其中有些是有用的，甚至在yahoo答案上的某些内容都是有用的。

— 尼克·克雷弗

4

错误！如我的回答中所述，并在现场演示中进行了演示，border: 0这不是的捷径border-width: 0。相反，短版总是将所有三个属性：border-color，border-style和border-width。

— 丹尼尔森·萨迈

3

@DenilsonSá我说过它们的作用与答案的第一行相同，因为如果边框的宽度为0，则其他2个在这里无关紧要。顺便说一句，澄清此问题的CSS 2.1是在此答案发出后的7个月内进行的最后一次呼叫，并在此之后的一年内作为建议进行了推送。如果您想在这里澄清旧答案，请这样做！积极鼓励编辑更新。

— 尼克·克拉弗

42

正如其他人所说，两者都是有效的，而且会成功的。我不是100％确信它们是相同的。如果您正在进行某种样式层叠，那么它们在理论上可能会产生不同的结果，因为它们有效地覆盖了不同的值。

例如。如果设置为“ border：无；” 然后再使用两种不同的样式来覆盖边框的宽度和样式，那么一种将起作用，而另一种则不会。

在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>

— 克里斯
source

1

要删除Sencha Touch 2中日期选择器的边框，我必须使用border: none代替border: 0。

— 克里斯·海拉

39

（注意：此答案已于2014-08-01更新，使其更详细，更准确，并添加了实时演示）

扩展shortand属性

根据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，每个渲染的边框都在多个元素之间共享（内部边框在相邻单元格之间共享；外部边框在单元格和表格本身之间共享；但行，行组，列和列组也共享边框））。该规范定义了一些解决边界冲突的规则：

与国界border-style的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），因此当更具体的规则仅定义样式或宽度时，它们的行为将有所不同。有关示例，请参见克里斯的答案。

现场演示！

是否想在一个页面中查看所有这些情况？打开现场演示！

— DenilsonSáMaia
source

21

使用

border: none;

在某些版本的IE中不起作用。IE9很好，但是在以前的版本中，即使样式为“无”，它也会显示边框。使用打印样式表时，我不想在输入框上使用边框，因此会遇到这种情况。

border: 0;

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

— 基兰
source

12

您可以根据Oli提供的规范简单地使用两者。

我总是用border:0 none;。

尽管单独指定它们没有什么害处，但是如果您确实使用旧版CSS1属性调用，则某些浏览器会更快地解析CSS。

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

— Xenni82
source

“某些浏览器将更快地解析CSS” →CSS解析时间没有明显差异。而且，实际上，CSS解析时间与99.999999999999％的情况无关。CSS渲染时间更为重要（而且与该问题完全无关）。

— 2014年

1

一些浏览器？你什么意思？好像是一场梦之类的。

— Rootical V.

7

我用：

border: 0;

从CSS 2.1中的8.5.4开始：

'边界'

值： [<border-width> || <border-style> || <'border-top-color'>] | 继承

所以您的任何一种方法看起来都不错。

— 克莱图斯
source

1

零虚线看起来与零固体相同

— Christopher Altman 2010年

1

真正。但是，另请参阅克里斯的答案

— 安东尼·哈奇金斯

5

好吧，要精确了解两者之间的区别border: 0，border: none我们可以做一些实验。

实验：

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

border: 0;
border: none;
border: transparent

边框样式：扎实！重要；边框颜色：红色！重要; border-width：2px！important; 边框颜色：红色！重要; border-width：2px！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>

展开摘要

在Firefox和chrome中，我的结果是相同的：

border: 0;似乎将border-width设置为0border-style none，但未更改border-color；

border: none;似乎只更改边框样式（至none）；

border: transparent;似乎将border-color更改为transparentborder-style none；

— 古老的但泽
source

2

尽管结果很可能是相同的（无边界），但0和技术上都没有解决不同的问题。

0表示边框宽度，没有一个表示边框样式。显然，宽度为0的边框不存在，因此将没有样式。

但是，如果以后要在样式表中覆盖它，则自然会专门解决其中一个问题。如果我现在想要一个3px的边框，那将是直接覆盖边框：关于宽度为0。如果我现在想要一个虚线边框，那将是直接覆盖边框：样式方面都没有。

— 卡莉
source

2

用CSS删除边框的最简单方法

border: 0;

— 爱库玛
source

-1

我们应该使用BORDER 0

根据我的意见和经验，我建议您使用Border：0; 有一个很好的很好的理由，因为每当我们使用border时：无，我理解它可以工作，但考虑一下我们使用的是border，1px，2px，3px等。我的意思是我们给边框赋予的值是... px / em / rem对，所以我们需要使用border：0; 用于删除边框值，因为我们知道使用背景时：这意味着我们正在删除背景，而不是其他值。

谢谢

— 维诺德·库马尔（Vinod Kumar）
source

-3

就我而言，

border:none 正在工作，但无效的w3c标准

这样更好，我们可以使用 border:0;

— 英国人
source

6

没有什么是无效的border: none。

— 昆汀