为什么我们要为特定浏览器定义边界半径？答案

【问题标题】：Why should we define border-radius for a particular browser?为什么我们要为特定浏览器定义边界半径？
【发布时间】：2014-02-25 22:14:18
【问题描述】：

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而不做它得到结果？

【问题讨论】：

CSS3: Do we still need to use browser prefixes? 的可能重复项
这个问题已经被问过好几次了，以不同的形式和不同的角度。对这些问题的总体回答质量不佳，但不能通过新的问题副本来改善。

标签： html css

【解决方案1】：

TL;DR：你不应该。

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

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

border-radius 长期以来一直通过标准属性得到支持。没有理由使用该属性的实验性供应商前缀版本，因为它不再是实验性的。

The CSS 2.1 specification says:

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

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

【讨论】：

【解决方案2】：

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

【讨论】：