边界半径和-webkit-border-radius之间的区别[重复]答案

【问题标题】：Difference between border-radius and -webkit-border-radius [duplicate]边界半径和-webkit-border-radius之间的区别[重复]
【发布时间】：2020-09-23 20:54:56
【问题描述】：

我有问题。我在我的css中定义了

-webkit-border-radius: 5px;

但它不适用于 IE。当我替换为

border-radius: 5px

它有效。但我不明白两者之间的区别......

谁能解释一下？

【问题讨论】：

标签： html css

【解决方案1】：

-webkit 是一个vendor prefix，历来被浏览器供应商用来提供对实验性或不完整 API 的访问。在border-radius 标准化之前，它可以通过供应商前缀在某些浏览器（例如，使用 WebKit 引擎的 Safari）中使用。

现在标准化的 border-radius 属性得到广泛支持，供应商前缀不再是必需的（除非您的目标是较旧的浏览器，例如 Safari 4）。

由于 Safari 在许多 API 中的早期地位，非 WebKit 浏览器开始支持一些带有 -webkit 前缀的 API（因为在这种情况下，使用了前缀版本而不使用标准版本）。由于这些兼容性问题，浏览器供应商已不再使用供应商前缀，而在开发功能时主要依赖实验性标志。

【讨论】：

好的，非常感谢！如果我明白我可以用 radius-border 替换我所有的 webkit-radius-border 并且它将适用于所有浏览器（但不适用于旧版本）。什么是更好的解决方案？设置 webkit-radius-border 和 radius-border 属性还是只设置 radius-border？
除非您支持真正旧浏览器，否则您无需担心继续包含-webkit-border-radius，只需使用border-radius即可。根据caniuse.com/border-radius，需要前缀的浏览器包括 Firefox 3（全球使用率为 0.02%）和 Safari 4（全球使用率为 0.01%）。当然，有一些较新的 CSS 属性可能需要前缀，具体取决于您所针对的浏览器。

【解决方案2】：

它是基于 Webkit 的浏览器（如 Safari 和 Chrome）的供应商前缀。当浏览器实现新功能时，它们使用这些前缀，因此用户已经可以实现这些功能，并且当不同的浏览器以不同的方式实现该功能时，这无关紧要，因为所有主要浏览器都使用了最终版本的边界半径。 border-radius 版本是当今所有浏览器都支持的版本。

See the compatible browsers here

【讨论】：

【解决方案3】：

基于 WebKit 或 Blink 的应用程序，例如 Safari 和 Chrome，支持许多特殊的 CSS 的 WebKit 扩展。阅读更多here

【讨论】：