我应该使用'border: none'还是'border: 0'？-Java 学习之路

467

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

border：none;边界：0;

11 回答

29

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

我总是使用 border:0 none; .

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

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

回复于 2024-04-28T22:26:39+08:00
11
Both are valid. 这是你的选择 .

我更喜欢 border:0 因为它更短;我发现更容易阅读 . 您可能会发现 none 更清晰 . 我们生活在一个非常有能力的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 . 它们具有相同的渲染结果：没有显示任何内容 .
回复于 2024-04-28T22:26:39+08:00
383
（注意：此答案已在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: hidden （或 border-style: hidden ）将具有最高优先级，并且无论如何都将隐藏共享边框 .

在优先级的另一端， border: none （或 border-style: none ）具有最低优先级，后跟零宽度边界（因为它是最窄的边界） . 这意味着 computed value 的 border-style: none 和 computed value 的 border-width: 0 基本相同 .

级联规则和继承

由于 none 和 0 会影响不同的属性（ border-style 和 border-width ），因此当more specific rule仅定义样式或仅定义宽度时，它们的行为会有所不同 . 有关示例，请参阅Chris answer .

现场演示！

想在一个页面中查看所有这些案例吗？打开 live demo ！
回复于 2024-04-28T22:26:39+08:00
139
运用
```
border: none;
```
在某些版本的IE中不起作用 . IE9很好，但在以前的版本中，即使样式为“none”，它也会显示边框 . 我在使用打印样式表时遇到了这种情况，我不想在输入框上使用边框 .
```
border: 0;
```
似乎在所有浏览器中都能正常工作 .
回复于 2024-04-28T22:26:39+08:00

那么，为了准确地看到 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; 似乎只改变border-style（到 none ）;

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

回复于 2024-04-28T22:26:39+08:00

38

在我看来，

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

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

回复于 2024-04-28T22:26:39+08:00
0

虽然结果很可能是相同的（没有边界），但0和没有在技术上解决不同的东西 .

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

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

回复于 2024-04-28T22:26:39+08:00
3
它们实际上是等效的，pointing to different shortcuts：
```
border: 0;
//short for..
border-width: 0;
```
和另外一个..
```
border: none;
//short for...
border-style: none;
```
两个都工作，只需选择一个，然后继续:)
回复于 2024-04-28T22:26:39+08:00
2
我用：
```
border: 0;
```
来自8.5.4 in CSS 2.1：

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

所以你的任何一种方法都很好看 .
回复于 2024-04-28T22:26:39+08:00
21
正如其他人所说，两者都是有效的，并且可以解决问题 . 我不是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>
```
回复于 2024-04-28T22:26:39+08:00
-3

WE SHOULD USE BORDER 0

According to my opinion and experience, I would suggest please use Border: 0; 有一个有效且非常好的理由，因为每当我们使用border：none时，我理解它有效，但想想我们正在使用边框，1px，2px，3px等等 . 我的意思是我们给出的边界值是...... px / em / rem对，所以我们需要使用border：0;用于删除边框值因为我们知道何时使用background：none;这意味着我们正在删除一些不是其他值的背景 .

谢谢

回复于 2024-04-28T22:26:39+08:00

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

11 回答

扩展短期属性

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

级联规则和继承

现场演示！

实验：

相关问题