CSS div圆角

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库,虽然我还没有测试过(有人回复说它不起作用.)我个人的意见是,如果有人还在使用这些浏览器,互联网必须在日常生活中看起来像一个奇怪而可怕的地方,因此,他们不会错过他们的圆角.

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