兼容各浏览器CSS圆角.docVIP

有些恼人的圆角 一些网站（尤其是娱乐性为主的网站）从用户视觉体验角度出发，会将用户头像设置为圆角显示，以增加亲和度。如开心网的用户头像： 在此基础上，追求更简约的设计会直接将头像图片本身设置为圆角来展示，如腾讯朋友： 这个效果看似简单，但可能会令一些前端er感到头疼。毕竟在尚不支持CSS3圆角属性的IE大行其道的当下，高效的解决页面中的批量圆角图片不是那么容易。看到最后的童鞋也会发现，本文也无最优解，因为不同的环境，需求不同，技术实现也会不同。 技术实现 后端生成 似乎对于前端来说，最希望的就是后端工程师在程序开发上能支持用户上传头像时候，可以自动生成一组用于前台页面不同情境下使用的头像集合，既包含了默认直角的同时也会生成圆角版本的调用头像。 优点：节省前台页面对圆角图片处理的代码量，为公司省带宽，为用户省加载时间。 不足：后端开发成本提升，服务器负荷在生成头像阶段有极为微小的加剧。 前端实现 目前看来。似乎绝大部分的网站会采用由前端来实现这个效果。毕竟，前端负责的就是用户浏览器里的那些东西。 我们这里不会谈论那个07年广泛使用的“4个b绝对定位”的方式，毕竟对于但页面中数量众多的用户头像来说，这个方法虽可行但效率太差，同时也是表格布局思维的遗老——以视觉为基础进行布局的意识要不得。 方法一：针对非IE的更现代款浏览器，采用CSS3 相信大家都会最喜欢这个方式，简单高效，代