兼容各浏览器CSS圆角.docVIP

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

文档评论(0)

1亿VIP精品文档

相关文档