CSS浏览器应用半径边框的安全方法？答案

【问题标题】：CSS browser safe way to apply a radius border?CSS浏览器应用半径边框的安全方法？
【发布时间】：2011-02-15 03:07:45
【问题描述】：

我想应用一个 3px 左上角和右上角半径边框。

如何在所有浏览器（例如 IE、WebKit、Mozilla）上执行此操作？

如果浏览器不支持border-radius属性，则默认为无半径（方角）。

【问题讨论】：

标签： html css

【解决方案1】：

如果 IE 曾经支持任何标准，那我就吃掉我的帽子。

这是你所希望的最好的：

-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;

编辑：我的错，错过了“仅左上角和右上角”部分，更正了 codez

【讨论】：

IE 是他列表中的第一个，但您的示例中唯一没有涵盖的一个：P 检查我发布的链接
是的，但是 OP 还说“如果浏览器不支持border-radius 属性，则默认为无半径”，这就是会发生的情况。所以答案是正确的。
详细说明，@sarah，这正是你想要的。 IE 不支持圆角，所以它只会显示方形。 WebKit (Safari) 和 Moz (Firefox 等) 确实支持圆角，通过浏览器特定的 CSS（带有前缀的规则）。简单的border-radius 用于面向未来。
这会将边框半径应用于整个元素，而不仅仅是左上角和右上角
你可以为一些没有图片的 IE 圆角添加一些 DD_roundies。

【解决方案2】：

检查这个话题。它应该满足您在圆角的所有需求： Emulating CSS3 border-radius and box-shadow in IE7/8

【讨论】：

【解决方案3】：

border-top-left-radius:3px;
border-top-right-radius:3px;
-webkit-border-top-right-radius:3px;
-webkit-border-top-left-radius:3px;
-moz-border-radius-topright:3px;
-moz-border-radius-topleft:3px;

这适用于 Mozilla 和 Webkit 浏览器以及任何支持 CSS3 边框半径属性的东西。 IE = 不行。另外，你应该注意FF2会支持这个，但是圆角不是很漂亮。

【讨论】：

【解决方案4】：

border-radius.com 非常适合：

-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;

【讨论】：

查看我为 msie 发布的链接。
meo 的链接很好。跳转到此页面：smashingmagazine.com/2010/04/28/… 也是如此。 MSIE 没有直接的 CSS 解决方案。 :-(