跨浏览器弯曲边框

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用于开箱即用.