CSS div圆角 [英] CSS div rounded corners

问题描述

我正在尝试执行以下操作...

I'm attempting to do the following...

这是我现在的状态，但它无法正确呈现。

Here's what I've got right now.. but it's not rendering correctly. Does anyone have any idea as to how I'd fix this?

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>

推荐答案

相反，我建议你使用CSS3， ，不需要额外的HTML或Javascript标记，臭名昭着地导致任何圆形元素在网页加载时闪烁。

Instead I suggest you use CSS3, which unlike other methods, does not require extraneous HTML or Javascript markup that notoriously causes any rounded element to 'flash' upon page load.

 -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

This generator is also helpful: http://borderradius.com/ and there is another one at http://css3generator.com

在大多数（如果不是所有）浏览器的最新版本中， border-radius：10px; 工作正常，具体声明将过时。

In the newest versions of most (if not all) browsers border-radius: 10px; works just fine, and within due time, the browser specific declarations will be obsolete.

要在IE6,7和8中使用边框半径，请尝试 ms-border-radius js库 ，虽然我没有测试它（和有人回答说它不工作。）我个人的意见是，如果有人还在使用这些浏览器，互联网必须看起来像一个奇怪和可怕的地方，他们每天，因此，他们不会错过他们的圆角。

To make border radius work in IE6, 7 and 8, try ms-border-radius js library, though I have not tested it (and somebody has responded that it does not work.) My personal opinion is that if anybody is still using these browsers, the internet must look like a strange and scary place to them on the daily, and thus, they will not miss their rounded corners.

Aside：当CSS3没有受到广泛支持时，您尝试使用的方法更适用。它是在互联网的奇怪时期创建的，当IE6的受欢迎程度驱使无数的Web开发人员找到高度非语义的创意解决方案，否则简单的问题。因此，感谢您的Internet Explorer花了几年的时间，我们的生活和减缓网页设计和开发的进展。

Aside: The method you are trying to use was more applicable when CSS3 was not as widely supported. It was created during a strange period of the Internet when the popularity of IE6 drove countless web developers to find highly non-semantic creative solutions to otherwise simple problems. So thank you Internet Explorer for taking a few years off all of our lives and slowing the progression of web design and development.

这篇关于CSS div圆角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！