这两种方法中哪一种符合W3C标准?它们是否都能在浏览器中正常运行?
边界:没有; 边界:0;
这两种方法中哪一种符合W3C标准?它们是否都能在浏览器中正常运行?
边界:没有; 边界:0;
当前回答
两者都成立。这是你的选择。
我更喜欢border:0,因为它更短;我觉得这样更容易理解。你可能会发现没有比这更清楚的了。我们生活在一个CSS后处理非常强大的世界,所以我建议你使用任何你喜欢的,然后通过“压缩器”运行它。这里没有什么值得打的圣战,但Webpack→LESS→PostCSS→PurgeCSS是一个很好的2020堆栈。
也就是说,如果你所有的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设置样式。它们有相同的渲染结果:什么都不显示。
其他回答
在我看来,
边框:没有工作,但不是有效的w3c标准
我们可以用border:0;
它们实际上是等价的,指向不同的快捷方式:
border: 0;
//short for..
border-width: 0;
另一个…
border: none;
//short for...
border-style: none;
两者都可以,只要选择一个就可以了:)
两者都成立。这是你的选择。
我更喜欢border:0,因为它更短;我觉得这样更容易理解。你可能会发现没有比这更清楚的了。我们生活在一个CSS后处理非常强大的世界,所以我建议你使用任何你喜欢的,然后通过“压缩器”运行它。这里没有什么值得打的圣战,但Webpack→LESS→PostCSS→PurgeCSS是一个很好的2020堆栈。
也就是说,如果你所有的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设置样式。它们有相同的渲染结果:什么都不显示。
这是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
您可以根据Oli提供的规范简单地使用两者。
我总是使用border:0 none;。
尽管分开指定它们没有坏处,而且如果您确实使用遗留的CSS1属性调用,一些浏览器会更快地解析CSS。
虽然边境:0;通常会将边框样式默认为none,但我注意到一些浏览器强制执行默认边框样式,这可能会奇怪地覆盖border:0;。