一个图片圆角的css代码

　　圆角一直是我喜欢的形状，不过在网页布局中，要实现圆角，却是不易，网上有用一张图片实现的，也有不用任何图片实现的，但这些代码所实现的效果，却只能单一的表现圆角，并不能发挥圆角更多的表现力。

　　这个代码用了四张图片，实现的效果与那个一张图片的差不多，但却更有潜力，甚至能加上一个arrow(当然，只能加在这四幅图片的某一幅上了)，而且代码更有可读性，容易理解。原先我一直想着DIV，故做得太复杂了，且只能在Firefox中用。现在用了Span，就可以简单得多了，甚至还可以做成自适应宽度。现在可以看看，能不能把Grey也这样做，免得再用表格做布局。

先来看看Css代码：

#Box{  
    position:relative;height:1%;  
}  
 
#Content{  
    border:1px solid #CCCCCC;  
}  
 
#Box .leftTop{  
    background:url(images/left_top.gif) no-repeat left top;  
    width:40px;  
    height:40px;  
    position:absolute;  
    left:0;  
    top:0;  
}  
#Box .rightTop{  
    background:url(images/right_top.gif) no-repeat left top;  
    width:40px;  
    height:40px;  
    position:absolute;  
    right:0;  
    top:0;  
}  
#Box .leftBottom{  
    background:url(images/left_bottom.gif) no-repeat left top;  
    width:40px;  
    height:20px;  
    position:absolute;  
    left:0;  
    bottom:-12px;  
}  
#Box .rightBottom{  
    background:url(images/right_bottom.gif) no-repeat left top;  
    width:40px;  
    height:20px;  
    position:absolute;  
    right:0;  
    bottom:-12px;  
} 

再看看htm文件：

<DIV id=Box> 
<SPAN class=leftTop></SPAN> 
<SPAN class=rightTop></SPAN> 
  <DIV id=Content> 
  <P>圆角里的内容</P> 
  </DIV> 
<SPAN class=leftBottom></SPAN> 
<SPAN class=rightBottom></SPAN> 
</DIV 

如果把

#Content{
 border:1px solid #CCCCCC;
}

换了，用图片来做，就能更丰富的表现圆角了，沿着这个思路，一定可以把这个圆角做得更好。