圆角之图片实现方法小结

Posted 2020-06-14

这几天一直在捣鼓图片实现圆角的方法。捣鼓了两天，累的脑都缺氧了。终于功夫不负有心人，在我一直不断尝试和修改下最终成功完成了图片实现圆角效果。

好了，废话不多说，直接如题。

这里先总结下，图片实现圆角效果我分为两种：

一、上下两张图，中间自适应高度

实现原理：利用切割圆角图片为上下两张，中间利用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才可以覆盖原来父框的边框线。

代码：

优点：图片小，加载快。

缺点：代码较上面稍复杂。

其实这个方法还可以利用将四张图片加载在精灵图更加缩小图片。