CSS 我应该使用“边框：无”还是“边框：0”？

Question

提问by John Himmelman

Which of the two methods conforms to W3C standards? Do they both behave as expected across browsers?

这两种方法中哪一种符合 W3C 标准？它们在浏览器中的行为是否都符合预期？

border: none;
border: 0;

边界：无；
边框：0；

Answer 1

采纳答案by Oli

Both are valid.It's your choice.

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

I prefer border:0because it's shorter; I find that easier to read. You may find nonemore legible. We live in a world of very capable CSS post-processors so I'd recommend you use whatever you prefer and then run it through a "compressor". There's no holy war worth fighting here.

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

That all said, if you're hand-writing all your production CSS, I maintain —despite the grumbling in the comments— it doesn't hurt to be bandwidth conscious. Using border:0willsave an infinitesimal amount of bandwidth. On its own that counts for very little but if you make every byte count, you will make your website faster.

话虽如此，如果您正在手写所有生产 CSS，我认为——尽管评论中有抱怨——但注意带宽并没有什么坏处。使用border:0将节省极少量的带宽。就其本身而言，这并不重要，但如果您将每个字节都计算在内，您的网站就会变得更快。

The CSS2 specs are here. These are extended in CSS3 but not in any way relevant to this.

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

You can use any combination of width, style and colour.
Here, 0sets the width, nonethe style. They have the same rendering result: nothing is shown.

您可以使用宽度、样式和颜色的任意组合。
在这里， 0设置宽度，none样式。它们具有相同的渲染结果：没有显示任何内容。

Answer 2

回答by Nick Craver

They are equivalent in effect, pointing to different shortcuts:

他们是等价的效果，指向不同的快捷方式：

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

And the other..

和另一个..

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

Both work, just pick one and go with it :)

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

Answer 3

回答by Chris

As others have said both are valid and will do the trick. I'm not 100% convinced that they are identical though. If you have some style cascading going on then they could in theory produce different results since they are effectively overriding different values.

正如其他人所说，两者都是有效的，并且可以解决问题。我不是 100% 相信它们是相同的。如果您有一些样式级联正在进行，那么理论上它们可能会产生不同的结果，因为它们有效地覆盖了不同的值。

For example. If you set "border: none;" and then later on have two different styles that override the border width and style then one will do something and the other will not.

例如。如果您设置“边框：无；” 然后稍后有两种不同的样式覆盖边框宽度和样式，然后一个会做某事而另一个不会。

In the following example on both IE and firefox the first two test divs come out with no border. The second two however are different with the first div in the second block being plain and the second div in the second block having a medium width dashed border.

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

So though they are both valid you may need to keep an eye on your styles if they do much cascading and such like I think.

因此，尽管它们都是有效的，但如果它们像我想的那样进行大量级联等操作，您可能需要密切关注您的风格。

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

Answer 4

回答by Denilson Sá Maia

(note: this answer has been updated on 2014-08-01 to make it more detailed, more accurate, and to add a live demo)

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

Expanding the shortand properties

扩展 shortand 属性

According to W3C CSS2.1 specification(“Omitted values are set to their initial values”), the following properties are equivalent:

根据W3C CSS2.1 规范（“Omitted values are set to their initial values”），以下属性是等效的：

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>

If these rules are the most specific ones applied to the borders of an element, then the borders won't be shown, either because of zero-width, or because of hidden/nonestyle. So, at the first look, these three rules look equivalent. However, they behave in different ways when combined with other rules.

如果这些规则是应用于元素边框的最具体的规则，那么边框将不会显示，要么是因为零宽度，要么是因为hidden/none样式。所以，乍一看，这三个规则看起来是等价的。然而，当与其他规则结合时，它们的行为方式不同。

Borders in a table context in collapsing border model

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

When a table is rendered using border-collapse: collapse, then each rendered border is shared between multiple elements (inner borders are shared among as neighbor cells; outer borders are shared between cells and the table itself; but also rows, row groups, columns and column groups share borders). The specification defines some rules for border conflict resolution:

当使用呈现表格时border-collapse: collapse，每个呈现的边框在多个元素之间共享（内部边框作为相邻单元格共享；外部边框在单元格和表格本身之间共享；但行、行组、列和列组也共享边框）。该规范定义了一些边界冲突解决规则：

Borders with the border-styleof hiddentake precedence over all other conflicting borders. […]
Borders with a style of nonehave the lowest priority. […]
If none of the styles are hiddenand at least one of them is not none, then narrow borders are discarded in favor of wider ones. […]
If border styles differ only in color, […]

与国界border-style的hidden优先于所有其他冲突的边框。[…]
样式为的边框具有none最低优先级。[…]
如果所有样式都不是hidden，并且至少有一个不是none，那么窄边框将被丢弃，取而代之的是更宽的边框。[…]
如果边框样式仅在颜色上不同，[…]

So, in a table context, border: hidden(or border-style: hidden) will have the highest priority and will make the shared border hidden, no matter what.

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

On the other end of the priorities, border: none(or border-style: none) have the lowest priority, followed by the zero-width border (because it is the narrowest border). This means that a computed valueof border-style: noneand a computed valueof border-width: 0are essentially the same.

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

Cascading rules and inheritance

级联规则和继承

Since noneand 0affect different properties (border-styleand border-width), they will behave differently when a more specific ruledefines just the style or just the width. See Chris answerfor an example.

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

Live demo!

现场演示！

Want to see all these cases in one single page? Open the live demo!

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

Answer 5

回答by Kieran

Using

使用

border: none;

doesn't work in some versions of IE. IE9 is fine but in previous versions it displays the border even when the style is "none". I experienced this when using a print stylesheet where I didn't want borders on the input boxes.

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

border: 0;

seems to work fine in all browsers.

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

Answer 6

回答by Xenni82

You may simply use both as per the specification kindly provided by Oli.

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

I always use border:0 none;.

我总是使用border:0 none;.

Though there is no harm in specifying them seperately and some browsers will parse the CSS faster if you do use the legacy CSS1 property calls.

虽然单独指定它们并没有什么坏处，但如果您确实使用旧的 CSS1 属性调用，某些浏览器会更快地解析 CSS。

Though border:0;will normally default the border style to none, I have however noticed some browsers enforcing their default border style which can strangely overwrite border:0;.

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

Answer 7

回答by cletus

I use:

我用：

border: 0;

From 8.5.4 in CSS 2.1:

从CSS 2.1 中的 8.5.4 开始：

'border'
Value:[ <border-width> || <border-style> || <'border-top-color'> ] | inherit

'边界'
值：[ <border-width> || <边框样式> || <'border-top-color'> ] | 继承

So either of your methods look fine.

所以你的任何一种方法看起来都很好。

Answer 8

回答by Agesly Danzig

Well, to precisely see the difference between border: 0and border: nonewe can make some experiments.

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

Experiment:

实验：

Lets create three divs, first one whose border can only be disabled by setting its width to zero, second one that can only be disabled by setting its style to none, and a third with a border that can only be "disabled" by setting its color to transparent. Then lets try the effect of:

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

border: 0;
border: none;
border: transparent
border-style: solid!important; border-color: red!important; border-width: 2px!important; border-color: red!important; border-width: 2px!important; border-style: solid!important;

border: 0;
border: none;
border: transparent
边框样式：solid!important; 边框颜色：红色！重要；边框宽度：2px！重要；边框颜色：红色！重要；边框宽度：2px！重要；边框样式：solid!important;

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>

My results were the same in both firefox and chrome:

我的结果在 Firefox 和 chrome 中都是一样的：

border: 0;Seems to set border-width to 0and border-style to none, but not change border-color;

border: 0;似乎将 border-width0和 border-style 设置为none，但不更改 border-color；

border: none;Seems to only change border-style (to none);

border: none;似乎只改变边框样式（到none）；

border: transparent;Seems to change border-color to transparentand border-style to none;

border: transparent;似乎将 border-colortransparent和 border-style 改为none;

Answer 9

回答by Carly

While results will most likely be the same (no border), the 0 and none are technically addressing different things.

虽然结果很可能是相同的（无边界），但 0 和 none 在技术上解决了不同的问题。

0 addresses border width and none addresses border style. Obviously a border of 0 width is nonexistent so will therefore have no style.

0 地址边框宽度，无地址边框样式。显然，宽度为 0 的边框不存在，因此将没有样式。

However, if later on in your stylesheet you intend to override this, you would naturally specifically address one or the other. If I now wanted a 3px border, that would be directly overriding border: 0 in regards to width. If I now wanted a dotted border, that would be directly overriding border: none in regards to styling.

但是，如果稍后在您的样式表中您打算覆盖它，您自然会专门解决其中一个。如果我现在想要一个 3px 的边框，那将直接覆盖 border: 0 的宽度。如果我现在想要一个虚线边框，那将直接覆盖边框：没有关于样式。

Answer 10

回答by Love Kumar

Easiest Way to remove border with css

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

border: 0;

CSS 我应该使用“边框：无”还是“边框：0”？

提问by John Himmelman

采纳答案by Oli

回答by Nick Craver

回答by Chris

回答by Denilson Sá Maia

Expanding the shortand properties

扩展 shortand 属性

Borders in a table context in collapsing border model

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

Cascading rules and inheritance

级联规则和继承

Live demo!

现场演示！

回答by Kieran

回答by Xenni82

回答by cletus

'border'

'边界'

回答by Agesly Danzig

Experiment:

实验：

回答by Carly

回答by Love Kumar

相关推荐

最近更新

标签

CSS 我应该使用“边框：无”还是“边框：0”？

提问by John Himmelman

采纳答案by Oli

回答by Nick Craver

回答by Chris

回答by Denilson Sá Maia

Expanding the shortand properties

扩展 shortand 属性

Borders in a table context in collapsing border model

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

Cascading rules and inheritance

级联规则和继承

Live demo!

现场演示！

回答by Kieran

回答by Xenni82

回答by cletus

'border'

'边界'

回答by Agesly Danzig

Experiment:

实验：

回答by Carly

回答by Love Kumar

相关推荐

CSS Container/Wrapper Div 不包含所有内容？

CSS 如何淡出图像的边？

如何使 CSS URL 背景图像显示在 localhost 中？

CSS 下划线 css3 过渡

相关推荐

最近更新

标签