标签：
这几天一直在捣鼓图片实现圆角的方法。捣鼓了两天，累的脑都缺氧了。终于功夫不负有心人，在我一直不断尝试和修改下最终成功完成了图片实现圆角效果。
好了，废话不多说，直接如题。
这里先总结下，图片实现圆角效果我分为两种：
一、上下两张图，中间自适应高度
实现原理：利用切割圆角图片为上下两张，中间利用border-left(right)：1px solid black，高度不写（高度自适应）。
具体步骤：1：建立三个top,mid,bottom
2: 在top，bottom分别加入圆角背景图片。
3：在mid，border-left(right)：1px solid black；
代码：
优点：图片少，代码简单，布局方便。
缺点：图片文件优点大，个人不推荐，不过初学者可用尝试。
二、上下左右四个角加入四张圆角图，高度自适应
实现原理：利用绝对定位来实现四张图片分别定位在四个角，然后在利用border:1px solid black;来实现其他边框及高度自适应。
注意：在用绝对定位的时候必须注意在父框四个角来定位，不是以流浪器左上角来定位，因此定位时要观察位移效果，
不然虽然加载了圆角图片但是边框黑色线覆盖不了（尼玛，这个知识点没有掌握好，我被坑了一个下午外加一个晚上）
绝对定位的时候left:-1px;top:-1px;等必须要多移动一个px才可以覆盖原来父框的边框线。
代码：
优点：图片小，加载快。
缺点：代码较上面稍复杂。
其实这个方法还可以利用将四张图片加载在精灵图更加缩小图片。
标签：
原文地址：http://www.cnblogs.com/AlexZero/p/5194732.html
