3,图片圆角框
收录理由:兼容性强,可以表现很复杂的圆角效果。
图三
特点:
1.使用四个圆角图形(或一个圆图片)。
2.兼容性:通杀所有浏览器。
3.这是最常用的圆角框做法。
4.因为采用图片来表现,所以其圆角是超级平滑,无任何锯齿现象。
5.表现丰富,适用于各种对图片表现要求较高的圆角框。
缺点:
1.构造这个圆角也需要加入四个标签来装四张角图片,结构也有冗余。
2.重用性不强:如果一个页面有多个圆角,并且要实现不同的半径大小,则要重新制作一套圆角图片。
3.如果对结构的冗余没有特别的需求,这就是超级圆滑圆角框的解决方案了。
实现原理:
利用九宫格原理,在一个容器的四个角加入绝对定位(或相对定位)的四张圆角图片。