兼容各浏览器的css圆角

5、o-3aspan{width:60px;height:60px;display:block;background:url(images/portrait_round.png);position:absolute;left:0;top:0;}因为要使用带过渡透明的PNG图片，所以此方法会遇到IE6不支持PNG的问题。解决的办法有很多，详细的说明请移步这篇文章：《IE6下png背景不透明问题的综合拓展》。本demo中采用IE6背景图更换为gif格式，虽然有一点点锯齿但总比加载一个巨大的JS文件强。再或者可以狠狠心，针对IE6就不提供圆角的样式，而是默认的直角头像，如腾讯朋友，在IEtes

6、ter模拟的IE6环境下就是直角的。本DEMO中针对IE6改进后的部分CSS：#demo-3aspan{width:60px;height:60px;display:block;cursor:pointer;background:url(images/portrait_round.png)!important;background:url(images/portrait_round.gif);position:absolute;left:0;top:0;}针对IE6增加了2条语句，一个是光标在头像上时变为手型（显示为可点击区域），一个是背景设置为GIF格式图片。本demo中采用IE6

7、背景图更换为gif格式，虽然有一点点锯齿但总比加载一个巨大的JS文件强。两者截图对比：改进上述方法看上去还不错，但每次都要在结构中显式地添加一个额外的标签总是没有什么爱。不单单是有损于结构代码的优雅，更是增加了页面的体积、无助于服务器效能提升和带宽的节省，同时增大的网页体积也不利于用户在客户端更快的加载网页。那就考虑什么办法能在满足结构代码精简优雅的同时又能实现我们想要的头像圆角？是的，用JS在客户端动态的生成额外的圆角层标签。改进后的DEMO请猛击这里。