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

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

另一个…

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

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

为了精确地看到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;

使用

border: none;

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

border: 0;

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

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

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

另一个…

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

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

(注:此答案已于2014-08-01更新，使其更详细，更准确，并增加了现场演示)

扩展短路特性

根据W3C CSS2.1规范(“省略的值被设置为它们的初始值”)，以下属性是等效的:

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>

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

折叠边界模型中表上下文中的边界

当使用border-collapse: collapse渲染表时，每个渲染的边框都在多个元素之间共享(内部边框作为邻居单元格共享;外部边界在单元格和表本身之间共享;而且行、行组、列和列组共享边界)。该规范定义了一些边界冲突解决规则:

具有隐藏边界样式的边界优先于所有其他冲突边界。[…] 样式为none的边框优先级最低。[…] 如果没有一个样式是隐藏的，并且至少有一个样式不是，那么窄的边框将被丢弃，转而使用宽的边框。[…] 如果边框样式只是颜色不同，[…]

因此，在表上下文中，border: hidden(或border-style: hidden)将具有最高优先级，并将隐藏共享边界。

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

级联规则和继承

由于none和0影响不同的属性(border-style和border-width)，当更具体的规则只定义样式或宽度时，它们的行为将有所不同。请看克里斯回答的例子。

现场演示!

想在一页里看到所有这些案例吗?打开现场演示!

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

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

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