2014年10月27日

ie不支持图片圆角解决方案


切图网(www.qietu.com):最近在一个网页切图的项目中碰到一个问题:设计中有圆角图片的元素,但是ie8及其以下是不支持圆角属性的,但是需要考虑ie7~ie8的兼容性,首先想到的就是ie的圆角插件,是一种htc后缀的用于css脚本的插件,主流的有iecss3,PIE,但是经过测试,这些插件均可以完成一个图层的圆角,但是不能解决一个图片的圆角,有点拗口,图层和图片是完全不一样的。

最终用到了一种很笨的方法,通过增加一张周围有四个白色角(因为设计背景是白色,用白色可以在挡住图片四个角的同时,可以与背景融合)的图片,通过绝对定位覆盖到图片上面,通过调整好位置,即可实现图片的圆角。下面是参考资料激发的灵感:

因为朋友的关系,最近上facebook比较频繁。
发现上面的圆角图片并不是程序生成的(太费资源),仅仅用“定位”就解决了所有图片的圆角边效果。

该代码运用了 CSS Sprites 图片整合技术 将所有的圆角边框汇聚到一张PNG图片上(PNG兼容),然后外框加“相对定位 position:relative;”和“超出部分隐藏 overflow:hidden;”,在框内,应用绝对定位调整圆角的位置。附言:即日起,将不考虑IE6浏览效果

演示效果:
http://cuikai-wordpress.stor.sinaapp.com/uploads/roundedimage-corners.html

CSS代码:

  1. #roundedimage{
  2. overflow:hidden; width:50px; height:50px;
  3. position:relative;
  4. }
  5. .UIRoundedImage_Corners {
  6. background:transparent none repeat scroll 0 0;
  7. display:block;height:100%;width:100%;
  8. overflow:hidden;
  9. position:absolute;top:0;left:0;
  10. }

html代码:

  1. <div id=”roundedimage”>
  2. <img alt=”Kai Cui” src=”http://profile.ak.facebook.com/profile6/1918/57/q1070114775_5686.jpg”/>
  3. <span class=”UIRoundedImage_Corners”>
  4. <img src=”http://static.ak.fbcdn.net/images/ui/UIRoundedImage.png”/>
  5. </span>
  6. </div>

来源:http://uicss.cn/rounded-image-corners/

切图网是国内首家致力于psd转html5网页切图制作服务的公司。

iecss3

标签:

微信扫一扫二维码访问