这些天我们应该使用-moz-border-radius属性吗？

Question

我正在使用W3C CSS验证服务来验证CSS,它返回了以下错误:

属性-moz-border-radius-bottomleft不存在:5px

我的问题是,我们是否需要它,因为现代浏览器似乎理解border-bottom-left-radius等.

这是完整的CSS:

height: 160px;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
background: transparent url(../images/search-box-repeat-small.png) repeat;

Answer 1

Firefox了解从版本4开始的标准化border-*-radius属性.

如果您要为所有四个角指定相等的半径,并且您对支持Firefox <4.0和其他旧浏览器不感兴趣,那么您也可以将令人惊讶的八个边界半径声明减少到一个:

height: 160px;
border-radius: 5px;
background: transparent url(../images/search-box-repeat-small.png) repeat;

如果你需要支持Firefox 3.6及更早版本,你仍然需要带前缀的属性,但是为每个角落指定一个仍然只是要求麻烦:

height: 160px;
-moz-border-radius: 5px;
border-radius: 5px;
background: transparent url(../images/search-box-repeat-small.png) repeat;

另请注意,未加前缀的属性应该在规则中排在最后,因此支持未加前缀的属性的浏览器将使用它来获得最佳的标准一致性.¹

¹ _{是的,供应商确实以不符合的方式实现了前缀属性,因为规范中没有任何内容表明它们不能.有关Mozilla删除前缀后更改内容的详细信息,请参阅Gecko说明-moz-border-radius.}