最近在一个网页切图的项目中碰到一个问题：设计中有圆角图片的元素，但是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代码：

roundedimage{

overflow:hidden; width:50px; height:50px;
position:relative;
}
.UIRoundedImage_Corners {
background:transparent none repeat scroll 0 0;
display:block;height:100%;width:100%;
overflow:hidden;
position:absolute;top:0;left:0;
}
html代码：

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

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

iecss3

标签：ie