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

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

边界:没有; 边界:0;

当前回答

在我看来，

边框:没有工作，但不是有效的w3c标准

我们可以用border:0;

2013-02-01 12:24:48

其他回答

我使用:

border: 0;

从CSS 2.1中的8.5.4开始:

“边界” 取值:[<border-width> || <border-style> || <'border-top-color'>] | inherit

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

2010-05-27 16:26:54

两者都成立。这是你的选择。

我更喜欢border:0，因为它更短;我觉得这样更容易理解。你可能会发现没有比这更清楚的了。我们生活在一个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设置样式。它们有相同的渲染结果:什么都不显示。

2010-05-27 16:27:13

它们实际上是等价的，指向不同的快捷方式:

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

另一个…

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

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

2010-05-27 16:28:50

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

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

2010-06-01 09:33:44

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

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

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

2016-10-04 21:20:27

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

推荐文章

最新文章

标签