我应该使用'border: none'Or 'border: 0'?

这两种方法中哪一种符合W3C标准?它们是否都能在浏览器中正常运行?

< br > < p >边界:没有; 边界:0;< / p >
478858 次浏览
小开

我使用:

border: 0;

从# EYZ0:

“边界”

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

两种方法看起来都没问题。

小开
最佳答案

这是你的选择。

我更喜欢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设置样式。它们有相同的渲染结果:什么都没有显示
小开

它们在效果， 指向不同的快捷方式中是等价的:

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

另一个…

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

两者都可以，只要选择一个就可以了:)

小开

正如其他人所说的那样，两者都是有效的，而且会奏效。但我并不是百分之百确信它们是一样的。如果你有一些样式级联，那么理论上它们可以产生不同的结果，因为它们有效地覆盖了不同的值。

为例。如果你设置“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>
小开

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

我总是使用border:0 none;。

尽管分开指定它们没有坏处，而且如果您确实使用遗留的CSS1属性调用，一些浏览器会更快地解析CSS。

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

小开

使用

border: none;

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

border: 0;

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

小开

在我看来，

border:none正在工作，但不是有效的w3c标准

所以我们最好使用border:0;

小开

(注:此答案已于2014-08-01更新，使其更详细，更准确，并添加了现场演示)

扩展短路特性

根据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呈现一个表时，每个呈现的边框都在多个元素之间共享(内部边框在相邻单元格之间共享;外部边界在单元格和表本身之间共享;而且行、行组、列和列组共享边界)。规范定义了一些边界冲突解决规则:

  1. 带有hidden的border-style的边界优先于所有其他冲突的边界。[…]

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

  3. 如果没有一个样式是hidden，并且至少有一个样式不是none，那么窄边框将被丢弃，转而使用宽边框。[…]

  4. 如果边框样式只是颜色不同，[…]

因此，在表上下文中，border: hidden(或border-style: hidden)将具有最高优先级，并将隐藏共享边界。

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

级联规则和继承

由于none和0影响不同的属性(border-style和border-width)，当更具体的规则只定义样式或宽度时，它们的行为会有所不同。有关示例，请参阅克里斯回答。

# EYZ0 !

想在一页里看到所有这些案例吗?打开< a href = " http://codepen.io/denilsonsa/pen/LkdHh?编辑=110" rel="noreferrer">现场演示!

小开

虽然结果很可能是相同的(没有边界)，但0和none在技术上解决的是不同的问题。

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

但是，如果稍后在样式表中打算覆盖这一点，那么自然需要专门处理其中一个。如果我现在想要一个3px的边框，这将直接覆盖border:宽度为0。如果我现在想要一个虚线边界，这将直接覆盖边界:没有关于样式。

小开

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

实验:

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

  • # EYZ0
  • # EYZ0
  • < p > # EYZ0

    边框样式:固体!重要; 边框颜色:红色!重要; 边框宽度:2 px !重要; 边框颜色:红色!重要; 边框宽度:2 px !重要; 边框样式:固体!重要; 李< / p > < / > 

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-width为0和border-style为none，但不改变border-color;

似乎只改变border-style (none);

似乎将border-color改为transparent, border-style改为none;

小开

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

border: 0;
小开

这是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


提交答案