CSS圆角Box的实现小结

一、先总结一下各种实现的方法

全部浮动法

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

HTML代码如下：

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

CSS代码如下：

.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 no-repeat;}

优点：简单、方便、易上手。
缺点：需要清除浮动、圆角图片留白处不能透明。
原理简析：三个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') left top no-repeat;}

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

滑动门法

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

HTML代码如下：

<div class="slidingDoorMethod">
  <div class="inner">滑动门法</div>
</div>

CSS代码如下：

.slidingDoorMethod{
　　width:350px; 
　　height:32px; 
　　background:url('images/roundBox_left.gif') left top no-repeat;}
.slidingDoorMethod .inner{
　　line-height:32px; 
　　margin:0 0 0 6px; 
　　padding:0 0 0 10px; 
　　background:url('images/roundBox_slidingDoor_right.gif') right top no-repeat;
}

优点：代码精简、自由度大。
缺点：CSS要求较高、滑动门切图要求多。
原理简析：使用一个内嵌标签，外部标签为左圆角，内嵌的标签包含了背景与右圆角。

负Margin法

负Margin 法是我比较喜欢的一种方法，简单合理，开发效率高。主要利用负Margin 技术让俩个div 重叠，“挤”出俩个圆角，实现出图片圆角效果。

HTML代码如下：

<div class="negativeMarginMethod">
  <div class="topLeft"></div>
  <div class="topRight"></div>
  <div class="title">负Margin法</div>
</div>

CSS代码如下：

.negativeMarginMethod{width:350px; height:32px;}
.negativeMarginMethod .topLeft{height:5px; _overflow:hidden; background:url('images/roundBox_negativeMargin.gif') left top no-repeat;}
.negativeMarginMethod .topRight{height:5px; _overflow:hidden; margin:-5px 0 0 5px; background:url('images/roundBox_negativeMargin.gif') right top no-repeat;}
.negativeMarginMethod .title{line-height:28px; padding:0 0 0 15px; background:url('images/roundBox_middle.gif') left top repeat-x;}

优点：简单直接，开发效率高。
缺点：需理解负Margin 用法，特定的切图方式。
原理简析：主要利用负Margin 技术让俩个div 重叠，“挤”出俩个圆角，实现出图片圆角效果。

负左Margin法

这个负左Margin法是我自己瞎琢磨出来的，代码有点风骚，这里纯粹当做一个新的思路放上来，对IE6似乎有点小缺陷，但只要知道固定宽度也能够兼容。主要原理就是三个div 一起浮动，主体放前面，俩个圆角利用负左margin 让他覆盖到相应的位置。

HTML代码如下：

<div class="negativeMarginLeftMethod">
  <div class="inner">
    <div class="title">负左Margin法</div>
  </div>
  <div class="left"></div>
  <div class="right"></div>
</div>

CSS代码如下：

.negativeMarginLeftMethod{width:350px; height:32px;}
.negativeMarginLeftMethod .left{float:left; width:6px; height:32px; margin:0 0 0 -100%; _margin:0 0 0 -350px;  background:url('images/roundBox_left.gif') left top no-repeat;}
.negativeMarginLeftMethod .right{float:left; width:8px; height:32px; margin:0 0 0 -8px; background:url('images/roundBox_right.gif') left top no-repeat;}
.negativeMarginLeftMethod .inner{float:left; width:100%; line-height:32px; }
.negativeMarginLeftMethod .title{margin:0 8px 0 6px; padding:0 0 0 10px; background:url('images/roundBox_middle.gif') left top repeat-x;}

优点：代码足够风骚。
缺点：代码略臃肿、CSS要求较高、IE6需要知道具体宽度。
原理简析：主要利用负Margin 技术让俩个div 重叠，“挤”出俩个圆角，实现出图片圆角效果。

上面五种图片圆角实现方式，除了最后一种略微不适合实际中运用外，前面四种都可以很好的兼容各个浏览器且兼顾了一定的开发效率。个人比较推崇滑动门法和负Margin 法这俩种方法。当然没有最好的方法只有最适合的自己方法，根据自己的需要来选择一种适合自己的方法才是最棒的方法。

所用的的图片

roundBox_left.gif roundBox_middle.gif roundBox_right.gif

roundBox_slidingDoor_right.gif

roundBox_negativeMargin.gif

二、各种案例

前面讲述的是顶部两个圆角的实现，如果想实现四个圆角，就必须多加两个div或其他HTML来实现，并多两个或三个图片

案例1--本例只用一个图片实现，使用的是滑动门法

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<head></head>
<style>
.container{margin:10px auto;}
.bd {  width:50%;  margin:0 auto;  position:relative;}
.bd .rc,.bd .rc span {  height:7px;  overflow:hidden;  display:block; background:url("corner2.png") no-repeat 0px 0px;  position:relative;}
.bd .rc span{  display:block; height:7px; width:7px;}
.bd .tp span,.bd .bp span {  float:right;}
.bd .tp { margin-bottom:-7px;  background-position:-8px 0;}
.bd .bp {  margin-top:-7px;  background-position:-8px -8px;}
.bd .bp span {  background-position:0 -8px;}
.bd .main_warp { border:1px solid #C2DEF3; background:#F1F6FA; padding:10px;}
</style>
<body>
<div class="container">    
    <div class="bd">
      <span class="rc tp"><span></span></span>
      <div class="main_warp">
        用图片做比较简单<br/>
        用图片做比较简单<br/>
        用图片做比较简单<br/>
        用图片做比较简单<br/>
        用图片做比较简单<br/>
      </div>
      <span class="rc bp"><span></span></span>
    </div>   
</div><!--Containner end-->
</body>
</html>

效果如图：

缺点：只用一张图片虽然比较好，但不够灵活，无法实现比较复杂的圆角效果，如有阴影的圆角，或其他比较好看的效果

案例2--本例用五个图片实现，使用的是滑动门法

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<head></head>
<style>
.container{margin:10px auto;width: 70%;}
#Content {width: 100%; background: url(left-top.png) top left no-repeat;}
.bTop {background: url(right-top.png) top right no-repeat;padding: 1.25em 1.25em 0.625em;}
.bBottom {background: url(left-bottom.png) bottom left no-repeat;}
.bBottom p {display: block;padding: 0.625em 1.25em 1.25em;margin: 0 0 0 0;background: url(right-bottom.png) bottom right no-repeat;}
.allcontent {background: url(right.png) top right repeat-y;padding: 0.625em 1.25em;}
</style>
<body>
<div class="container">    
    <div id="Content">
        <div class="bTop"> </div>
        <div class="allcontent">
            <h2>Sylvan Skills Assessment</h2>
            <p>When it comes to tutoring services, Sylvan is the go-to educational resource for your local community because we believe that learning should be personal and dynamic. Utilizing technology (including iPads®) and digital lessons, we take learning to the next level of engagement and interactivity. Start your child on the path to success by partnering with Sylvan. Here's how it works:
            <br/>
            </p>                        
            <br style="clear:both;" />
        </div>
    </div>
    <div class="bBottom"><p> </p></div>            
</div><!--mainContent end-->
</body>
</html>

优点：可以实现各种复杂效果，只要改变相应的图片即可

缺点：资源使用比较多——图片多

转载于:https://www.cnblogs.com/JoannaQ/archive/2013/01/25/2876377.html

CSS圆角Box的实现小结

猜你喜欢