兼容各浏览器CSS圆角.doc

有些恼人的圆角 一些网站（尤其是娱乐性为主的网站）从用户视觉体验角度出发，会将用户头像设置为圆角显示，以增加亲和度。如开心网的用户头像： 在此基础上，追求更简约的设计会直接将头像图片本身设置为圆角来展示，如腾讯朋友： 这个效果看似简单，但可能会令一些前端er感到头疼。毕竟在尚不支持CSS3圆角属性的IE大行其道的当下，高效的解决页面中的批量圆角图片不是那么容易。看到最后的童鞋也会发现，本文也无最优解，因为不同的环境，需求不同，技术实现也会不同。 技术实现 后端生成 似乎对于前端来说，最希望的就是后端工程师在程序开发上能支持用户上传头像时候，可以自动生成一组用于前台页面不同情境下使用的头像集合，既包含了默认直角的同时也会生成圆角版本的调用头像。 优点：节省前台页面对圆角图片处理的代码量，为公司省带宽，为用户省加载时间。 不足：后端开发成本提升，服务器负荷在生成头像阶段有极为微小的加剧。 前端实现 目前看来。似乎绝大部分的网站会采用由前端来实现这个效果。毕竟，前端负责的就是用户浏览器里的那些东西。 我们这里不会谈论那个07年广泛使用的“4个b绝对定位”的方式，毕竟对于但页面中数量众多的用户头像来说，这个方法虽可行但效率太差，同时也是表格布局思维的遗老——以视觉为基础进行布局的意识要不得。 方法一：针对非IE的更现代款浏览器，采用CSS3 相信大家都会最喜欢这个方式，简单高效，代码无冗余可以保持优雅，只是目前鉴于黑势力的IE系列，若想普及还有待时日。DEMO请猛击这里。 HTML： div id=demo-2 a href= img src=images/hi.jpeg width=60 height=60 / /a /div CSS： img { border:0; display:block; } #demo-2 img { border-radius: 4px; } 方法二：针对不那么现代的IE系列，采用额外的一个绝对定位层 这个方法首先需要一张png图片为覆盖图，该覆盖图中间为透明，只在四角有不透明部分。设置图片外容器为相对定位，此覆盖层为绝对定位。当此覆盖图覆盖在头像上时，头像就因四角被覆盖，呈现出圆角的外观。DEMO请猛击这里。? HTML： div id=demo-3 a href= span/span img src=images/hi.jpeg width=60 height=60 / /a /div 基本的CSS： img { border:0; display:block; } #demo-3 a{ width: 60px; height: 60px; display: block; overflow: hidden; position: relative; } #demo-3 a span { 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就不提供圆角的样式，而是默认的直角头像，如腾讯朋友，在IEtester模拟的IE6环境下就是直角的。 本DEMO中针对IE6改进后的部分CSS： #demo-3 a span { 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背景图更换为gif格式，虽然有一点点锯齿但总比加载一个巨大的JS文件强。两者截图对比： 改进 上述方法看上去还不错，但每次都要在结构中显式地添加一个额外的标签总是没有什么爱。不单单是有损于结构代码的优雅，更是增加了页面的体积、无助于服务器效能提升和带宽的节省，同时增大的网页体积也不利于用户在客户端