Question

在div上实现跨浏览器（ff，即＆gt; 6，chrome，opera，safari）弯角的最佳方法是什么？我发现这篇文章http://jonraasch.com/blog/css-rounded-corners-in-all-browsers并且我已经多次按照说明进行操作，这是我的css：

#content_wrapper{
    -moz-border-radius:25px 25px 25px 25px;
    -webkit-border-radius: 25px;
    -khtml-border-radius: 25px;
    border-radius: 25px;
    background-color:#F2DADC;
    border:25px solid #ECD3D5;
    height:780px;
    opacity:0.7;
    width:747px;
    margin:0px auto;
    position:relative;
    display:block;
    zoom:1;
}

<!--[if lte IE 8]>
<style>
#content_wrapper{
behavior: url(template/css/border-radius.htc);
border-radius: 20px;
}
</style>
<![endif]-->

有人可以指出我做错了什么或有更好的方法来达到同样的效果，它在所有浏览器中工作除了在IE中

Answer 1

如果这是HTML文件中未经修改的代码段，则很明显为什么它不起作用：您在另一个<style>内使用了<style>代码。

作为第一个测试，只需尝试替换整个片段（删除IE特定块！）：

#content_wrapper{
    -moz-border-radius:25px 25px 25px 25px;
    -webkit-border-radius: 25px;
    -khtml-border-radius: 25px;
    behavior: url(template/css/border-radius.htc);
    border-radius: 25px;
    background-color:#F2DADC;
    border:25px solid #ECD3D5;
    height:780px;
    opacity:0.7;
    width:747px;
    margin:0px auto;
    position:relative;
    display:block;
    zoom:1;
}

如果可行，您可以将IE特定部分移动到单独的<style>：

中

<style type="text/css">
#content_wrapper{
    -moz-border-radius:25px 25px 25px 25px;
    -webkit-border-radius: 25px;
    -khtml-border-radius: 25px;
    border-radius: 25px;
    background-color:#F2DADC;
    border:25px solid #ECD3D5;
    height:780px;
    opacity:0.7;
    width:747px;
    margin:0px auto;
    position:relative;
    display:block;
    zoom:1;
}
</style>


<!--[if lte IE 8]>
<style type="text/css">
#content_wrapper{
    behavior: url(template/css/border-radius.htc);
    border-radius: 20px;
}
</style>
<![endif]-->

如果您仍然遇到问题，请尝试使用Google网站上的示例zip文件：http://code.google.com/p/curved-corner/downloads/detail?name=border-radius-demo.zip

Answer 2

您可以使用 JQuery Curvy Corners 来完成所有操作。

Answer 3

你提到的文章的引用：

border-radius.htc的路径与您预期的工作方式不同 - 与背景图像路径相对于样式表不同，此路径相对于您调用CSS的页面。

这就是为什么避免像我们上面那样的相对路径的好主意。

Answer 4

下载.htc文件：

http://curved-corner.googlecode.com/files/border-radius.htc

并将其放在文件夹./template/css中。有关详细信息，请参阅http://code.google.com/p/curved-corner/项目（与您放置的文章相关联）。

Answer 5

这是css：

.curved {

 -moz-border-radius:10px;

 -webkit-border-radius:10px;

 behavior:url(border-radius.htc);

}

以下是你如何使用它，当然：

<div class="curved">Curvd div</div>

Answer 6

如果您有兴趣在IE中使用圆角，可能会有用 - http://css3pie.com/

Answer 7

你好，我只是懒惰，并粘贴一个链接到别人的工作....我不想要赏金

试试这个。 http://dillerdesign.com/experiment/DD_roundies/

跨浏览器弯曲边框

7 个答案: