这两种方法中哪一种符合W3C标准?它们是否都能在浏览器中正常运行?
边界:没有; 边界:0;
这两种方法中哪一种符合W3C标准?它们是否都能在浏览器中正常运行?
边界:没有; 边界:0;
当前回答
(注:此答案已于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),当更具体的规则只定义样式或宽度时,它们的行为将有所不同。请看克里斯回答的例子。
现场演示!
想在一页里看到所有这些案例吗?打开现场演示!
其他回答
使用
border: none;
不能在某些版本的IE中工作。 IE9很好,但在以前的版本中,即使样式为“none”,它也会显示边框。 我在使用不希望在输入框上设置边框的打印样式表时就遇到过这种情况。
border: 0;
似乎在所有浏览器中都能正常工作。
这是Firefox 78.0.2(64位)的结果:
img {
border: none;
border-top-color: currentcolor;
border-top-style: none;
border-top-width: medium;
border-right-color: currentcolor;
border-right-style: none;
border-right-width: medium;
border-bottom-color: currentcolor;
border-bottom-style: none;
border-bottom-width: medium;
border-left-color: currentcolor;
border-left-style: none;
border-left-width: medium;
}
img {
border: 0;
border-top-color: currentcolor;
border-top-style: none;
border-top-width: 0px;
border-right-color: currentcolor;
border-right-style: none;
border-right-width: 0px;
border-bottom-color: currentcolor;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: currentcolor;
border-left-style: none;
border-left-width: 0px;
border-image-outset: 0;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
}
日期:20200720
(注:此答案已于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),当更具体的规则只定义样式或宽度时,它们的行为将有所不同。请看克里斯回答的例子。
现场演示!
想在一页里看到所有这些案例吗?打开现场演示!
在我看来,
边框:没有工作,但不是有效的w3c标准
我们可以用border:0;
它们实际上是等价的,指向不同的快捷方式:
border: 0;
//short for..
border-width: 0;
另一个…
border: none;
//short for...
border-style: none;
两者都可以,只要选择一个就可以了:)