兼容性较好的圆角

最近在写一个网站遇到了很多问题，下面写出来跟大家一起分享和讨论

1.圆角的产生

在最新的css3中有专门的圆角属性border-radius，代码如下：

<div style="width: 100px;height: 30px;border-radius: 10px;border:1px solid seagreen">aaaa</div>

火狐下是-moz-border-radius ，Safari 和 Chrome 是 -webkit-border-radius 。W3C规定的是border-radius

但是这么简单的属性ie低级版本（ie9以下）是不支持的。

还有一种像素边缘化（不知道别人是不是这么叫）代码如下：

/*css代码*/

.sharp{width:224px;margin-bottom: 12px;}

/*上圆角框通用设置样式，如果要运用多个不同颜色，以下6句不用重新变化--------------------------------*/
.b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{height:1px; font-size:1px; overflow:hidden; display:block;}
.b1,.b8{margin:0 5px;}
.b2,.b7{margin:0 3px;border-right:2px solid; border-left:2px solid;}
.b3,.b6{margin:0 2px;border-right:1px solid; border-left:1px solid;}
.b4,.b5{margin:0 1px;border-right:1px solid; border-left:1px solid; height:2px;}

.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{border-color:#BC7DA5;}
.color1 .b1,.color1 .b8{background:#BC7DA5;}
/*背景色*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{background:#ffffff;}

/*html代码*/

 <div class="sharp color1">
            <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
            <div class="head-left">
                <ul>
                    <li><a href="#">登录</a></li>
                    <li><a href="#">免费注册</a></li>
                    <li><a href="#">我的购物车</a></li>
                    <li><a href="#">我的收藏夹</a></li>
                </ul>
                <span class="parities">
                    <img class="img1" src="images/index_21.jpg"><img class="img2" src="images/index_23.jpg">
                    <span class="huilv">6.1283</span>
                </span>
            <div style="padding-bottom: 2px;"></div>
            </div>
            <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>
        </div>

这个方法有点冗杂，但是好处就是兼容性比较好

还有就是用图片来做。原理很简单，首先将圆角的4个角截取下来。贴到对应的位置，但是不会写了，找了很久也没找到，下次找到了在贴上来

这个方法有一个问题，如果使用margin属性，在ie各个版本又要调很久。

在自己做的时候也参考了很多，发现一个写的比较全面的，但是个人感觉是土方法，但是很实用链接：http://www.cnblogs.com/mslove/archive/2009/03/24/1420703.html

转载于:https://www.cnblogs.com/lightinblack/p/3631768.html