一张图片实现CSS圆角<代码精简版>
前面提到过通过纯css实现圆角矩形，但是代码过分赘余。而且一但页面元素稍有变动，在同一页面重复使用时，代码就更是赘余的一塌糊涂！css3更是不知猴年马月才普及……所以在这里能否寻找到代码相对较为精简的方法呢？考虑了一下，参考相关资料，我尝试这样来操作：
首先，通过FW画一个圆圈，圆角矩形的四个角就是四分之一个圆。通过半径的大小来控制弧度！假设我们画了一个半径为4px的圆作为素材命名为corner.gif 相应的html代码可以这样来写：无论是html代码还是css代码都减少了大概三分之一！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片实现圆角矩形</title>
<style type="text/css">
* {margin:0;padding:0}
.g2 {width:400px;height:400px;margin:0 auto;position:relative;}
.circle {width:9px;height:9px;background:url(corner.gif);position:absolute;z-index:9;overflow:hidden;}
.g21 {background-position:left top;left:0;top:0}
.g22 {background-position:right top;right:0;top:0}
.g23 {background-position:left -4px;left:0;bottom:0}
.g24 {background-position:right -4px;right:0;bottom:0}
.content {width:380px;height:380px;border:1px solid #000;padding:9px;}
</style>
</head>
<body>
<div class="g2">
<div class="circle g21"></div>
<div class="circle g22"></div>
<div class="circle g23"></div>
<div class="circle g24"></div>
<div class="content">content is here</div>
</div>
</body>
</html>
声明：原创文章-转载请注明Bruce|http://brucehan.com/本文链接地址： 一张图片实现CSS圆角<代码精简版>
Keep talking: