Oli*_*Oli 430
两者都有效.这是你的选择.
我更喜欢border:0因为它更短; 我发现更容易阅读.你可能会发现none更清晰.我们生活在一个非常有能力的CSS后处理器世界中,所以我建议你使用你喜欢的任何东西,然后通过"压缩器"运行它.这里没有值得战斗的圣战.
所有人都说,如果你手写所有的制作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样式.它们具有相同的渲染结果:没有显示任何内容.
Nic*_*ver 147
他们是等价的效果,指向不同的快捷方式:
border: 0;
//short for..
border-width: 0;
和另外一个..
border: none;
//short for...
border-style: none;
两个都工作,只需选择一个,然后继续:)
Chr*_*ris 41
正如其他人所说,两者都是有效的,并且会做到这一点.我不是100%确信它们是相同的.如果你有一些风格级联,那么它们理论上可以产生不同的结果,因为它们有效地覆盖了不同的值.
例如.如果设置"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>
Den*_*aia 36
(注意:此答案已在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>
如果这些规则是应用于元素边界的最具体的规则,则不会因为零宽度或hidden/ nonestyle 而显示边框.所以,初看起来,这三条规则看起来是等价的.但是,当与其他规则结合使用时,它们会以不同的方式运行.
当使用表格渲染表格时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),当更具体的规则仅定义样式或仅宽度时,它们的行为会有所不同.请参阅克里斯答案的示例.
想在一个页面中查看所有这些案例吗？打开现场演示!
小智 21
运用
border: none;
在某些版本的IE中不起作用.IE9很好,但在以前的版本中,即使样式为"none",它也会显示边框.我在使用打印样式表时遇到了这种情况,我不想在输入框上使用边框.
border: 0;
似乎在所有浏览器中都能正常工作.
小智 11
您可以根据Oli提供的规格简单地使用两者.
我总是用border:0 none;.
虽然单独指定它们没有什么害处,但如果你使用传统的CSS1属性调用,一些浏览器会更快地解析CSS.
虽然border:0;通常默认边框样式none,但我注意到一些浏览器强制执行其默认边框样式,可以奇怪地覆盖border:0;.
我用:
border: 0;
'边界'
值: [<border-width> || <border-style> || <'border-top-color'>] | 继承
所以你的任何一种方法都很好看.
好吧，为了准确地看到 和 之间的区别border: 0，border: none我们可以做一些实验。
让我们创建三个 div，第一个 div 的边框只能通过将其宽度设置为零来禁用，第二个只能通过将其样式设置为 none 来禁用，第三个的边框只能通过将其设置为“禁用”颜色为透明。然后让我们尝试一下效果：
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>我的结果在 Firefox 和 chrome 中都是一样的：
border: 0;似乎将 border-width0和 border-style 设置为none，但不更改边框颜色；
border: none;似乎只改变边框样式（到none）；
border: transparent;似乎将 border-colortransparent和 border-style 改为none;