css实现图片圆角边效果
因为朋友的关系，最近上facebook比较频繁。
发现上面的圆角图片并不是程序生成的（太费资源），仅仅用“定位”就解决了所有图片的圆角边效果。
该代码运用了 CSS Sprites 图片整合技术 将所有的圆角边框汇聚到一张PNG图片上（PNG兼容），然后外框加“相对定位 position:relative;”和“超出部分隐藏 overflow:hidden;”，在框内，应用绝对定位调整圆角的位置。附言：即日起，将不考虑IE6浏览效果
演示效果：
http://uicss.cn/wp-content/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代码：
- <div id="roundedimage">
- <img alt="Kai Cui" src="http://profile.ak.facebook.com/profile6/1918/57/q1070114775_5686.jpg"/>
- <span class="UIRoundedImage_Corners">
- <img src="http://static.ak.fbcdn.net/images/ui/UIRoundedImage.png"/>
- </span>
- </div>
07/01/2009 at 12:48
回复
07/02/2009 at 9:55
回复
07/02/2009 at 10:25
高度不固定的时候岂不是有N多这样的图片
回复
11/04/2009 at 15:22
在 IE6.0 下面无法实现，能给出解决方法吗？
回复
05/06/2011 at 17:44
facebook负载那么大的的图片资源，省去四个小脚，节约的不是你想象的那么小点资源。强！顶起！
回复