CSS div圆角

前端之家收集整理的这篇文章主要介绍了CSS div圆角前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试做以下事情……

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

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标记,这会在页面加载时导致任何圆角元素“闪烁”.
-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在我们的生活中度过了几年,并减缓了网页设计和开发的进程.

猜你在找的CSS相关文章