纯CSS实现的图片圆角边框效果,兼容IE6.
实现原理很简单,利用绝对定位,使一个背景为PNG图片的边框覆盖在原始图片上面.而兼容IE6,本文用的是一段JS来让万恶的万万人诅咒的IE6识别PNG图片的.当然,你还可以用滤镜的方式让IE6实现PNG效果.本文后面我会附上两种解决方案.个人比较推崇用JS来实现IE6PNG,适应性比较强,但如果你只有一两处用到PNG,完全可以用滤镜的方式来实现.
核心CSS代码:点此查看DEMO
.i_roundimg{ background:url(http://mrthink.net/demo/images/100508.png) no-repeat;cursor:pointer;width:60px;height:60px;position:absolute;}
DEMO用到的PNG背景图片:
另外,样例中有两种解决IE6下PNG图片的方案, 可参考.
mrthink.net的文章总是这么有感觉，谢谢分享了。
[回复]
经测试，chrome下第一个框会移位……
[回复]
Mr.Think 回复:
九月 6th, 2010 at 19:24
@电脑知识收藏夹, 嗯.感谢反馈bug.已修正.
[回复]
建议参考http://www.putaoshu.com/blog/article.asp?id=292
[回复]
Mr.Think 回复:
七月 5th, 2010 at 11:51
@putaoshu, 看了你的文章,的确不错.但AlphaImageLoader以及本文中的滤镜实现方法太耗资源,不建议使用.
[回复]
原来换站了，友链被无情的拿下，呵呵。不过没有关系，刚巧前段时间也在研究圆角的事情。谢谢分享。
[回复]
Mr.Think 回复:
五月 11th, 2010 at 15:46
@uoian, 新博客暂未做他站链接,请谅解:) 感谢支持:)
[回复]