CSS 中 border:none 和 border:0 应该使用哪个？

4个答案

在CSS中，border: none和border: 0都可以用来移除元素的边框，但它们在语义上有轻微的差别。

border: none意味着没有边框，即边框的样式设为"none"，这表明不显示边框；而border: 0将边框的宽度设置为0，这在效果上也会导致边框不显示，但语义上侧重于宽度。

对于大多数浏览器来说，这两种方式都会移除元素的边框，看起来没有差别。但是，border: none在某些情况下可能会有更好的可读性，因为它直接说明了边框是不存在的，而border: 0需要读者理解宽度为0意味着边框不会显示。

从实用角度来说，使用border: none可能会更清晰地表达你的意图，这在团队合作和维护代码时是有益的。

举例来说，如果你正在处理一个按钮组件，你可能会这样设定它的样式，以确保在所有情况下按钮看起来都没有边框：

css
.button {
  border: none;
  /* 其他样式 */
}

这样，无论何时别人阅读这段代码，都能很直观地理解边框是不应该展现的。

总结来说，在大多数情况下，border: none和border: 0可以互换使用。然而，border: none可能在语义上更清晰一些，因此如果不涉及性能优化等其他因素，推荐使用border: none来提高代码的可读性。

2024年6月29日 12:07 回复

**两者都有效。**这是你的选择。

我更喜欢，border:0因为它更短；我发现这样更容易阅读。您可能会发现none更清晰。我们生活在一个拥有非常强大的 CSS 后处理器的世界，所以我建议您使用您喜欢的任何东西，然后通过“压缩器”运行它。这里没有值得打的圣战，但 Webpack → LESS → PostCSS → PurgeCSS 是一个很好的 2020 年堆栈。

话虽如此，如果您手写所有的生产 CSS，我认为（尽管评论中有抱怨）关注带宽并没有什么坏处。使用它本身border:0 会节省极少量的带宽，但如果您__充分利用每个字节，您将使您的网站更快。

CSS2 规范在这里。这些在 CSS3 中得到了扩展，但与此没有任何关系。

shell
'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年6月29日 12:07 回复

它们实际上是等效的_，_指向不同的快捷方式：

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

和另一个..

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

两者都有效，只需选择一个即可使用:)

2024年6月29日 12:07 回复

正如其他人所说，两者都是有效的并且都会起作用。但我并不 100% 相信它们是相同的。如果您正在进行某种样式级联，那么理论上它们可能会产生不同的结果，因为它们实际上覆盖了不同的值。

例如。如果设置“边框：无；”然后使用两种不同的样式来覆盖边框宽度和样式，然后一种会执行某些操作，而另一种则不会。

在下面的 IE 和 Firefox 示例中，前两个测试 div 没有边框。然而，第二个 div 不同，第二个块中的第一个 div 是普通的，第二个块中的第二个 div 具有中等宽度的虚线边框。

因此，尽管它们都是有效的，但如果它们像我认为的那样进行大量级联，您可能需要留意您的样式。

shell
<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年6月29日 12:07 回复

CSS 中 border:none 和 border:0 应该使用哪个？

4个答案

你的答案