CSS纯图片圆角Box的实现技巧

CSS实例教程——纯图片圆角Box的实现技巧

BY：htttp://www.iiwnet.com

终于要开始写实战系列了，本站的口号可是理论为辅，实战为主哦。对，你没有看错，就是“纯图片”，不是纯代码实现而是利用图片来实现的圆角。你或许会不以为然，可是我想告诉你的是即使将来CSS3圆角实现全浏览器兼容，但在当下图片圆角依旧是主流，丰富的图片效果（渐变、阴影、透明度、圆角、浏览器兼容、开发维护效率）这些是用代码实现远远不可比拟的。所以说图片圆角在实战中的重要性是有目共睹的，掌握图片圆角的技巧为日常开发打下坚实的基础。下面开始剖析各个图片圆角的实现技巧，你会发现原来用图片实现的圆角也会那么的丰富多彩！

全部浮动法

如果一个CSS初学者写图片圆角效果，那么推荐使用全部浮动法，简单且容易上手。其原理就是左圆角左浮动，主体也左浮动，右圆角右浮动，外包div 平铺背景图片。很直观的就实现出图片圆角效果。缺点是之后会需要清除浮动，且因背景图片全部平铺，所以左右俩个圆角必须左右覆盖背景上不能让圆角留白处透明出下方的图片。

HTML代码如下：

<div class="floatMethod">

<div class="left"></div>

<div class="middle">全部浮动法</div>

<div class="right"></div>

</div>

.floatMethod{width:350px; height:32px; background:url('roundBox_middle.gif') left top repeat-x;}

.floatMethod .middle{float:left; line-height:32px; padding:0 0 0 10px;}

.floatMethod .left{float:left; width:6px; height:32px; background:url('roundBox_left.gif') left top no-repeat;}

.floatMethod .right{float:right; width:8px; height:32px; background:url('roundBox_right.gif') left top

优点：简单、方便、易上手。
缺点：需要清除浮动、圆角图片留白处不能透明。
原理简析：三个div 一起浮动，左右俩个div 放置圆角，外包div 使用背景平铺。

左右浮动法

个人认为左右浮动发是全部浮动法的升级版，修复了圆角图片留白处不能透明的缺陷。原理与全部浮动法有些类似，但现在左圆角左浮动，右圆角右浮动，主体直接放后面。主体利用margin 挤压使得俩个圆角留白处可以透明处下面的背景。

HTML代码如下：

<div class="newFloatMethod">

<div class="left"></div>

<div class="right"></div>

<div class="middle">左右浮动法</div>

</div>

CSS代码如下：

.newFloatMethod{width:350px; height:32px;}

.newFloatMethod .middle{line-height:32px; margin:0 8px 0 6px; padding:0 0 0 10px; background:url('images/roundBox_middle.gif') left top repeat-x;}

.newFloatMethod .left{float:left; width:6px; height:32px; background:url('images/roundBox_left.gif') left top no-repeat;}

.newFloatMethod .right{float:right; width:8px; height:32px; background:url('images/roundBox_right.gif')

优点：简单、易上手。
缺点：需要清除浮动。
原理简析：左圆角左浮动，右圆角右浮动，主体直接放后面

滑动门法

滑动门法是一种比较巧妙的方法，使用一个内嵌标签，外部标签为左圆角，内嵌的标签包含了背景与右圆角。要求切图要按照特定的方式切出，切图的图片同浮动法不同。缺点就是对CSS掌握要求比较高，切图也有特定的要求，且要注意宽度，尽量的让图片足够的长，防止宽度不够图片掉出情况发生。