跨浏览器圆角（无图像）答案

【问题标题】：Cross browser rounded corners (no image)跨浏览器圆角（无图像）
【发布时间】：2010-08-23 07:32:05
【问题描述】：

在将 PSD 转换为 HTML 甚至 HTML5 和 CSS 时，圆角并使这些角在所有浏览器（尤其是 Internet Explorer）中保持一致有多困难？

假设用代码而不是图像对角进行了圆角处理。

【问题讨论】：

【解决方案1】：

如果您需要 JavaScript 解决方案，可以查看Corner。它是跨平台的。

【讨论】：

【解决方案2】：

您已经接受了CSS3 PIE，但您可以在 IE3 中使用 border-radius 属性（以及渐变、阴影和其他有趣的 CSS3 功能）。我认为这是解决问题的更简洁的方法之一。

【讨论】：

【解决方案3】：

有一些不使用 Javascript 的跨浏览器圆角的解决方法：

CSS Rounded Corners In All Browsers
An Experiment in Rounded Corners
Rounded corners in CSS (cross browser implementations)

在基于 webkit 和 gecko 的浏览器中使用 CSS3，在 Opera 中使用 SVG，在 IE 中使用 VML。
此外，如果您希望通过 Javascript 使用著名的 jQuery Corners，您可能还想使用它。

【讨论】：

我知道这是一个旧线程，但你知道 - 第一个和最后一个链接依赖于使用 .htc 文件，实际上是 JavaScript - 所以你不能说这两个解决方案是“..not using Javascript”

【解决方案4】：

使用 CS3 border-radius 属性，这并不难。有些浏览器有自己的实现，例如 -moz-border-radius 用于 firefox，-webkit-border-radius 用于 safari 和 chrome。

但是IE仍然不支持border-radius，所以很难让它跨浏览器工作。

【讨论】：