Code
2023-06-28 09:00:02

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

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

边界:没有; 边界:0;

当前回答

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

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

另一个…

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

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

2010-05-27 16:28:50

其他回答

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

我更喜欢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: 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

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

实验:

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

边界:0; 边界:没有; 边界:透明 边框样式:固体!重要; 边框颜色:红色!重要; 边框宽度:2 px !重要; 边框颜色:红色!重要; 边框宽度:2 px !重要; 边框样式:固体!重要;

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浏览器上的结果是一样的:

边界:0;似乎设置border-width为0和border-style为none，但不改变border-color;

边界:没有;似乎只改变border-style(无);

边界:透明;似乎改变边界颜色为透明和边界样式为none;

2018-03-13 14:13:20

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

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

另一个…

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

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

2010-05-27 16:28:50

使用

border: none;

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

border: 0;

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

2012-04-06 13:45:41

推荐文章

aliyun

最新文章

标签

2024 code 京ICP备15047053号-1