跨浏览器曲线边框 [英] Cross-browser curved borders

问题描述

什么是在div上实现跨浏览器（ff，即> 6，chrome，opera，safari）弯角的最好方法。我发现这篇文章 http://jonraasch.com/blog/css-我已经多次跟踪指令，这里是我的css：

What is the best way to achieve cross-browser(ff,ie>6,chrome,opera,safari) curved corners on a div. I found this article http://jonraasch.com/blog/css-rounded-corners-in-all-browsers and I've followed instructions step by step multiple times, here is my 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

Can somebody point me what am I doing wrong or is there a better way to achieve the same effect, its working in all browsers except in IE

推荐答案

如果这是一个未修改的HTML文件的代码段，工作：您在另一个< style> 中使用< style> 标记。

If that's an unmodified snippet from your HTML file, it's clear why it doesn't work: You're using a <style> tag within another <style>.

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

As a first test, just try replacing your entire snippet with (remove the IE specific block!):

#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> ：

If that works, you can move the IE specific parts into a separate <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

If you still have problems, try the example zip file from the google website: http://code.google.com/p/curved-corner/downloads/detail?name=border-radius-demo.zip

这篇关于跨浏览器曲线边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！