Question

这两种方法中的哪一种符合W3C标准？它们是否都在浏览器中按预期运行？

border：none;
border：0;

Answer 1

两者都有效。这是您的选择。

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

所有人都说过，如果你手写所有的制作CSS，我会保持 - 尽管评论中抱怨 - 但带宽意识并没有伤害。使用border:0 将保存无限量的带宽。就其本身而言非常重要，但如果你使每个字节数，你将使你的网站更快。

CSS2规范are here。这些在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。它们具有相同的渲染结果：没有显示任何内容。

Answer 2

它们与效果，pointing to different shortcuts相同：

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

另一个......

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

两者都有效，只需选择一个并继续使用它：）

Answer 3

正如其他人所说，两者都是有效的，并且会做到这一点。我不是100％确信它们是相同的。如果你有一些风格级联，那么它们理论上可以产生不同的结果，因为它们有效地覆盖了不同的值。

例如。如果设置“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>

Answer 4

（注意：此答案已在2014-08-01更新，以使其更详细，更准确，并添加live demo）

扩展短期和属性

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

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渲染表格时，每个渲染边框在多个元素之间共享（内部边框在作为相邻单元格之间共享;外部边框在单元格和表格本身之间共享;但也包含行，行组，列和列组共享边框）。该规范定义了一些rules for border conflict resolution：

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），当more specific rule仅定义样式或仅定义样式时，它们的行为会有所不同宽度。有关示例，请参阅Chris answer。

Live demo <！/ H2>
想要在一个页面中查看所有这些案例吗？打开 live demo ！

Answer 5

使用

border: none;

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

border: 0;

似乎在所有浏览器中都能正常运行。

Answer 6

您可以按照Oli友情提供的规格使用两者。

我总是使用border:0 none;。

虽然单独指定它们没有什么害处，但如果你使用传统的CSS1属性调用，一些浏览器会更快地解析CSS。

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

Answer 7

我用：

border: 0;

来自8.5.4 in CSS 2.1：

'边界'

价值： [＆lt; border-width＆gt; || ＆LT;边界风格＆GT; || ＆LT; '边界顶色' ＆GT; ] |继承

所以你的任何一种方法看起来都很好。

Answer 8

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

实验

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

border: 0;
border: none;
border: transparent

边框式：坚固！重要; border-color：red！important; border-width：2px！important; border-color：red！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设置为0，border-style设置为none，但不更改border-color;

border: none;似乎只改变边框式（none）;

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

Answer 9

虽然结果很可能是相同的（没有边界），但0和没有技术上都是针对不同的东西。

0表示边框宽度，无地址边框样式。显然，0宽度的边框是不存在的，因此没有样式。

但是，如果您希望在样式表中稍后覆盖它，那么您自然会专门针对其中一个。如果我现在想要一个3px边框，那将直接覆盖border：0就宽度而言。如果我现在想要一个虚线边框，那将直接覆盖border：none关于样式。

Answer 10

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

border: 0;

Answer 11

我们应该使用BORDER 0

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

谢谢

Answer 12

这是Firefox 78.0.2（64位）中的结果：

img {
    border: none;
        border-top-color: currentcolor;
        border-top-style: none;
        border-top-width: medium;
        border-right-color: currentcolor;
        border-right-style: none;
        border-right-width: medium;
        border-bottom-color: currentcolor;
        border-bottom-style: none;
        border-bottom-width: medium;
        border-left-color: currentcolor;
        border-left-style: none;
        border-left-width: medium;
}

img {
    border: 0;
        border-top-color: currentcolor;
        border-top-style: none;
        border-top-width: 0px;
        border-right-color: currentcolor;
        border-right-style: none;
        border-right-width: 0px;
        border-bottom-color: currentcolor;
        border-bottom-style: none;
        border-bottom-width: 0px;
        border-left-color: currentcolor;
        border-left-style: none;
        border-left-width: 0px;
        border-image-outset: 0;
        border-image-repeat: stretch;
        border-image-slice: 100%;
        border-image-source: none;
        border-image-width: 1;
}

日期：20200720

Answer 13

在我看来，

border:none正在运行但无效的w3c标准

我们可以更好地使用border:0;

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

13 个答案:

扩展短期和属性

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

级联规则和继承

Live demo <！/ H2>
想要在一个页面中查看所有这些案例吗？打开 live demo ！

'边界'

实验

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

13 个答案:

扩展短期和属性

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

级联规则和继承

Live demo <！/ H2> 想要在一个页面中查看所有这些案例吗？打开 live demo ！

'边界'

实验

Live demo <！/ H2>
想要在一个页面中查看所有这些案例吗？打开 live demo ！