ID：15470102
大小：127.00 KB
页数：6页
时间：2018-08-03
4、r:0;display:block;}#demo-2img{border-radius:4px;}方法二：针对不那么现代的IE系列，采用额外的一个绝对定位层这个方法首先需要一张png图片为覆盖图，该覆盖图中间为透明，只在四角有不透明部分。设置图片外容器为相对定位，此覆盖层为绝对定位。当此覆盖图覆盖在头像上时，头像就因四角被覆盖，呈现出圆角的外观。DEMO请猛击这里。 HTML：
5、imgsrc="images/hi.jpeg"width="60"height="60"/>
6、t_round.png);position:absolute;left:0;top:0;}因为要使用带过渡透明的PNG图片，所以此方法会遇到IE6不支持PNG的问题。解决的办法有很多，详细的说明请移步这篇文章：《IE6下png背景不透明问题的综合拓展》。本demo中采用IE6背景图更换为gif格式，虽然有一点点锯齿但总比加载一个巨大的JS文件强。再或者可以狠狠心，针对IE6就不提供圆角的样式，而是默认的直角头像，如腾讯朋友，在IEtester模拟的IE6环境下就是直角的。本DEMO中针对IE6改进
7、后的部分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格式图
8、片。本demo中采用IE6背景图更换为gif格式，虽然有一点点锯齿但总比加载一个巨大的JS文件强。两者截图对比：改进上述方法看上去还不错，但每次都要在结构中显式地添加一个额外的标签总是没有什么爱。不单单是有损于结构代码的优雅，更是增加了页面的体积、无助于服务器效能提升和带宽的节省，同时增大的网页体积也不利于用户在客户端更快的加载网页。那就考虑什么办法能在满足结构代码精简优雅的同时又能实现我们想要的头像圆角？是的，用JS在客户端动态的生成额外的圆角层标签。改进后的DEMO请猛击这里。
此文档下载收益归作者所有
