CSS div 圆 Angular

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 标记，众所周知，这些标记会导致任何圆 Angular 元素在页面加载时“闪烁”。

 -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 ，虽然我还没有测试过(有人回应说它不起作用。)我个人的看法是，如果有人仍在使用这些浏览器，互联网对他们来说一定是一个陌生而可怕的地方每天，因此，他们不会错过他们的圆 Angular 。

旁白:您尝试使用的方法在 CSS3 未得到广泛支持时更适用。它是在 Internet 的一个奇怪时期创建的，当时 IE6 的流行驱使无数 Web 开发人员寻找高度非语义的创造性解决方案来解决原本简单的问题。因此，感谢 Internet Explorer 让我们的生活少了几年时间，并减缓了网页设计和开发的进程。