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

CSS

9 个月前提问

5 个月前修改

浏览次数160次

6个答案

在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 回复

（注：此答案已于2014-08-01更新，使其更详细、更准确，并添加了现场演示）

扩展shortand属性

根据W3C CSS2.1 规范（“省略的值设置为其初始值”），以下属性是等效的：

shell
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，每个渲染的边框在多个元素之间共享（内部边框在相邻单元格之间共享；外部边框在单元格和表格本身之间共享；而且行、行组、列和列组也共享边框））。该规范定义了一些边界冲突解决规则：

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

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

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

如果边框样式仅颜色不同，[...]

因此，在表上下文中，border: hidden(或border-style: hidden) 将具有最高优先级，并且无论如何都会隐藏共享边框。

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

级联规则和继承

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

现场演示！

想要在一页中查看所有这些案例吗？打开**现场演示**！

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 回复

使用

shell
border: none;

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

shell
border: 0;

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

2024年6月29日 12:07 回复

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

6个答案

扩展shortand属性

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

级联规则和继承

现场演示！

你的答案