我们为什么要为特定浏览器定义border-radius？

Question

border-radius是一个CSS3属性，用于制作圆角。我想让我的一张照片的角落四舍五入。

所以我使用CSS设置了我的图像，如下所示

#Images{
margin-top:20%;
margin-left:20%;
border:2px solid #BC8F8F;
padding:2px;
border-radius:40px;

}

当在firefox 26.0，chrome 32.0.1700.102和IE 9.0中运行时，我得到了预期的结果（带圆角）。

但我在博客中找到了以下样式，分别为firefox和webkit定义了边框半径（我猜webkit是chrome和safari，如果我错了就纠正我）

div{

background-image: url(beach.jpg);

width: 375px;

height: 500px;

border: 8px solid #666;

 border-radius: 40px;

-moz-border-radius: 40px;

-webkit-border-radius: 40px;

}

为什么我们应该在没有这样做的情况下得到结果时为每个浏览器定义border-radius？

Answer 1

TL; DR：你不应该。

---

供应商前缀属性（-something-）是实验性实现。它们不是标准的CSS（尽管CSS规范允许命名约定以避免与其他实验冲突）。

它们在属性成为标准之前使用，以便作者可以尝试并提供反馈以帮助开发规范（并找到特定浏览器实现中的错误）。

border-radius已经通过标准属性支持了很长时间。没有理由使用该属性的实验性供应商前缀版本，因为它不再是实验性的。

The CSS 2.1 specification says：

  

作者应避免特定于供应商的扩展

...因为实验性实施是为了试验而设计的，而不是在一般网站中使用。随着规范的开发，它们可能会在不同版本的浏览器中执行不同的操作，并且随着标准版本的接管，它们将来会变得不受支持。

Answer 2

根据http://caniuse.com/border-radius，您不必使用前缀。