图片自动加圆角的两种方法
准备：４个圆角GIF/PNG透明图
第一种方法：图片做背景
* { background:red; } .pic { background:url("http://www.douban.com/mpic/s1818356.jpg"); width:660px; height:300px; } .tl { background:url("http://hiphotos.baidu.com/ferryboat401/abpic/ item/a78762d0aea88b8ca1ec9c2b.jpg") no-repeat top left; } .tr { background:url("http://hiphotos.baidu.com/ferryboat401/abpic/ item/4eb363273a7bed00908f9d2b.jpg") no-repeat top right; width:660px; height:300px; } .bl { background:url("http://hiphotos.baidu.com/ferryboat401/abpic/item/ 6d4c8a13348c78d3f6039e2b.jpg") no-repeat bottom left; } .br { background:url(http://hiphotos.baidu.com/ferryboat401/abpic/ item/702f8c545445ea1c3b29352b.jpg) no-repeat bottom right; width:660px; height:300px; }
第二种方法：图片被插入
* { background:red; } .tl { background:url("http://hiphotos.baidu.com/ferryboat401/abpic/ item/a78762d0aea88b8ca1ec9c2b.jpg") no-repeat; width:10px; height:10px; position:absolute; top:15px; left:10px; } .tr { background:url("http://hiphotos.baidu.com/ferryboat401/abpic/ item/4eb363273a7bed00908f9d2b.jpg") no-repeat; width:10px; height:10px; position:absolute; top:15px; left:206px; } .bl { background:url("http://hiphotos.baidu.com/ferryboat401/abpic/ item/6d4c8a13348c78d3f6039e2b.gif") no-repeat; width:10px; height:10px; position:absolute; top:38px; left:10px; } .br { background:url("http://hiphotos.baidu.com/ferryboat401/abpic/ item/702f8c545445ea1c3b29352b.jpg") no-repeat; width:10px; height:10px; position:absolute; top:38px; left:206px; }over