HTML 圆角 Internet Explorer答案

【问题标题】：HTML round corners Internet ExplorerHTML 圆角 Internet Explorer
【发布时间】：2011-12-23 02:10:44
【问题描述】：

我怎样才能像这个网站在某些地方那样做圆角.. 我到处搜索，发现很多代码让我很困惑该使用哪一个

-moz-border-radius:10px;

-webkit-border-radius:10px;

behavior:url(border-radius.htc);

我应该使用哪一个？为什么它不能与 Internet Explorer 一起使用？

【问题讨论】：

标签： html internet-explorer rounded-corners

【解决方案1】：

这些-moz-、-o-、-webkit- 前缀是支持旧版本浏览器所必需的。然而，与流行的看法相反，-ms- 前缀不适用于border-radius 属性。当 IE 开始支持 border-radius 时，在版本 9 中，使用了 vendorless border-radius 属性^Link。

-moz-border-radius: 10px;    /* Gecko, Firefox */
-webkit-border-radius: 10px; /* Safari, chrome */
-o-border-radius?: 10px;     /* Opera */
border-radius: 10px;         /* Modern browsers*/

【讨论】：

-ms- 前缀仅适用于 IE10+，不是吗？或者至少IE9+？
感谢-ms-border-radius 部分，我将它添加到我的，但所有功劳归于你 :)
@JamWaffles 实际上，根据this source，-ms- 为border-radius 是不必要的，因为IE 在添加支持时支持无供应商border-radius。 IE9+
@RobW：那么为什么要提到 -o- 和 -ms- 属性，根据您提到的来源，它们从未存在过？不要编辑您的答案，因为您可能有这样做的理由。
@Nickolay 我将它们添加到 cmets，但忘记更新我的原始帖子。我已经更新了我的答案，现在应该是完全正确的。

【解决方案2】：

哇，有很多重复，但没关系这是取自 jQuery UI 的代码这些是 CSS 语句，您需要在 <style></style> 之间或 CSS 样式表中添加它们并将它们链接到您的 HTML 文件每个人所做的都是为特定区域添加角（上、下、左上、右上、全部……）

您可以在任何地方修改半径以使它们弯曲得更多..

.ui-corner-tl { -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; border-top-left-radius: 8px; -ms-border-radius:8px; }
.ui-corner-tr { -moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px; border-top-right-radius: 8px; -ms-border-radius:8px; }
.ui-corner-bl { -moz-border-radius-bottomleft: 8px; -webkit-border-bottom-left-radius: 8px; border-bottom-left-radius: 8px; -ms-border-radius:8px; }
.ui-corner-br { -moz-border-radius-bottomright: 8px; -webkit-border-bottom-right-radius: 8px; border-bottom-right-radius: 8px; -ms-border-radius:8px; }
.ui-corner-top { -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; border-top-left-radius: 8px; -moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px; border-top-right-radius: 8px; -ms-border-radius:8px; }
.ui-corner-bottom { -moz-border-radius-bottomleft: 8px; -webkit-border-bottom-left-radius: 8px; border-bottom-left-radius: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-bottom-right-radius: 8px; border-bottom-right-radius: 8px; -ms-border-radius:8px; }
.ui-corner-right {  -moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px; border-top-right-radius: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-bottom-right-radius: 8px; border-bottom-right-radius: 8px; -ms-border-radius:8px; }
.ui-corner-left { -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; border-top-left-radius: 8px; -moz-border-radius-bottomleft: 8px; -webkit-border-bottom-left-radius: 8px; border-bottom-left-radius: 8px; -ms-border-radius:8px; }
.ui-corner-all { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; -ms-border-radius:8px; }

我相信这是跨浏览器，旧版本的 Internet Explorer 可能无法使用它

【讨论】：

酷，非常有用，我会试试看！感谢大家的快速回复xD
您不应该简单地将随机代码复制并粘贴到它似乎可以工作的地方。请考虑支持 Rob W 的答案。他提到，这里需要ms前缀。
是的，我正要评论他的回答，给他信任：)
如果我决定使用部分圆角，我将以这种方式添加您的代码，这将变得非常有用
我不知道你在 jquery 中哪里找到了 ms 前缀，但 blog.danielfriesen.name/2011/01/05/… 声称从来没有“-ms-border-radius”，bugs.jqueryui.com/ticket/4972 似乎同意。

【解决方案3】：

我强烈推荐CSS3PIE。在某些情况下，由于不透明等原因，它可能有点不稳定，但对于绝大多数网站来说，它大大缩短了完成切割所需的时间。

只需将behaviour:url(/pie.htc); 添加到CSS3 声明的end，IE 将完全支持 box-shadow、border-radius 和线性渐变。

【讨论】：

【解决方案4】：

Internet Explorer 6-8 不支持 css3，这就是 border-radius 在那里不起作用的原因。

对于 Internet Explorer 9，您可以使用（无前缀）border-radius 属性进行圆角处理 (http://ie.microsoft.com/testdrive/HTML5/BorderRadius/)

对于基于 webkit 的旧浏览器，您需要使用前缀 -webkit。
对于旧的基于 mozilla 的浏览器，您需要使用前缀 -moz。
对于旧版本的 Opera 浏览器，您需要使用前缀 -o。
对于其他人，您可以只使用没有任何前缀的边框半径属性

您的跨浏览器代码必须与下面的代码类似

{
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}

IE6-8版本需要使用js插件如http://css3pie.com/

【讨论】：

Opera 从不支持-o-border-radius。