html中的圆角

今天给大家讲一下html中的圆角，以及如何实现圆角。

最早的时候，我们都是用图片，做一个圆角的图片，做成背景，或者在容器的角落里面应用一下这张图片，这么做很容易实现。

随着时间的迁移，发现小图片太多了，增加浏览器发送的请求数量，又增加下载的数据量，而且大家都开始扁平化设计了。

css3中有一些属性可以用来实现圆角，但是对IE6-8的支持不好，各种不同的浏览器也有自己的解释规则。

/*通用圆角 */
.corner{
    -moz-border-radius: 10px; /* Firefox - */
    -webkit-border-radius: 10px; /* Safari and Chrome - */
    border-radius: 10px;
    behavior: url(../public/css/pie.htc); /*for IE*/
    width:100px;
    height:100px;
    background:#000000;
}
/* 上圆角 */
.cornerT{
    -moz-border-radius: 10px 10px 0px 0; /* Firefox - */
    -webkit-border-radius: 10px 10px 0px 0; /* Safari and Chrome - */
    border-radius: 10px 10px 0px 0;
    behavior: url(../public/css/pie.htc); /*for IE*/
    width:100px;
    height:100px;
    background:#000000;
}
/* 下圆角*/
.cornerB{
    -moz-border-radius: 0 0 10px 10px; /* Firefox - */
    -webkit-border-radius: 0 0 10px 10px; /* Safari and Chrome - */
    border-radius: 0 0 10px 10px;
    behavior: url(../public/css/pie.htc); /*for IE*/
    width:100px;
    height:100px;
    background:#000000;
}

主要是三个属性

-moz-border-radius: 0 0 10px 10px; /* Firefox - */
-webkit-border-radius: 0 0 10px 10px; /* Safari and Chrome - */
border-radius: 0 0 10px 10px;

如果兼容IE8一下版本需要

behavior: url(../public/css/pie.htc); /*for IE*/

这一句话，需要下载pie.htc文件，还有一个iecss3.htc文件，我尝试了一下，兼容性不如pie.htc。

还可以使用js，jquery有一个插件jquery.corner.js，我也尝试了一下，在firefox30.0中不兼容，没有出来效果。

附件是我的代码，大家可以下载尝试一下。

html中的圆角,布布扣,bubuko.com