跨浏览器弯曲边框

Question

什么是在div上实现跨浏览器（ff，即> 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/