最近在写一个网站遇到了很多问题，下面写出来跟大家一起分享和讨论
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
原文：http://www.cnblogs.com/lightinblack/p/3631768.html