Question

我正在尝试做以下事情......

这就是我现在所拥有的......但它没有正确渲染。有没有人知道如何解决这个问题？

CSS

    /* Curved Corners */
    .bl {
background: url(bl.gif) 0 100% no-repeat;
/*background-color:#EFFBEF;*/
width: 700px;
margin-left: auto ;
margin-right: auto ;}
    .br {
background: url(br.gif) 100% 100% no-repeat;
}
    .tl {
background: url(tl.gif) 0 0 no-repeat;
}
    .tr {
background: url(tr.gif) 100% 0 no-repeat;
}
    .clear {font-size: 1px; height: 1px}

HTML

    <div class="bl"><div class="br"><div class="tl"><div class="tr">

        <div id="header">

    </div>

    <div id="footer">

    </div>

        </div></div></div></div>

Answer 1

相反，我建议您使用CSS3，与其他方法不同，它不需要无关的HTML或Javascript标记，这会导致任何圆形元素在页面加载时“闪烁”。

 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -o-border-radius: 10px;
 -ms-border-radius: 10px;
 -khtml-border-radius: 10px;
 border-radius: 10px;

此生成器也很有用：http://borderradius.com/还有另一个http://css3generator.com

在大多数（如果不是全部）浏览器border-radius: 10px;的最新版本中工作正常，并且在适当的时候，浏览器特定的声明将过时。

要使边框半径在IE6,7和8中工作，请尝试 ms-border-radius js library ，但我还没有测试过（有人回复说它不起作用。）我的个人观点如果有人还在使用这些浏览器，互联网必须在日常生活中看起来像一个奇怪而可怕的地方，因此，他们不会错过他们的圆角。

旁白：当CSS3不受广泛支持时，您尝试使用的方法更适用。它是在互联网的一个奇怪时期创建的，当时IE6的普及推动了无数网络开发人员为其他简单问题找到高度非语义的创造性解决方案。非常感谢Internet Explorer在我们的生活中度过了几年，并减缓了网页设计和开发的进程。

Answer 2

总有curvycorners，如果浏览器支持它，它会使用本机css来提高速度，如果浏览器不支持，则使用javascript来恢复javascript。

Answer 3

可以使用jQuery圆角rounded_corner

轻松完成

 $(document).ready(function(){
   $("#b1").corner();
 });

您无需担心jQuery方法的跨浏览器问题。

Answer 4

所有主流浏览器的精彩摘要，告诉您如何围绕每个角落或所有角落：

http://perishablepress.com/press/2008/11/24/perfect-rounded-corners-with-css/

Answer 5

相反，只需将此代码放在您想要圆角的类中。它肯定会起作用。

-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

CSS div圆角

5 个答案: