来自http://www.sun10.cn/blog/trackback.asp?tbID=49
今天在看一个网站时，看到许多圆角矩形，全是用图画得，记得前一段时间看到用CSS代码控制的圆角矩形，心想要是这个网站的矩形全是用CSS控制的，那岂不是要写好多个样式出来，因为每个矩形的颜色、角度都是不一样的，想想这倒是个问题，用函数来实现可以不？
先来看看CSS是如何实现圆角矩形的。
1、CSS样式部分：
程序代码
.main{width:100px;}
b.rounder{display:block;background: #FFF}
b.rounder b{display:block;height:1px;overflow: hidden; background: #99cc33;}
b.r1{margin: 0 1px}
b.r2{margin: 0 2px}
.content{height:22px;text-align:center; padding-top:10px; }
2、内容部分：
程序代码
<div class="main">
<b class="rounder"><b class="r2"></b><b class="r1"></b></b>
<div class="content">这是内容!</div>
<b class="rounder"><b class="r1"></b><b class="r2"></b></b>
</div>
实际效果：
HTML代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>CSS圆角矩形</title>
<style type="text/css">
.main{width:100px;}
b.rounder{display:block;background: #FFF}
b.rounder b{display:block;height:1px;overflow: hidden; background: #99cc33;}
b.r1{margin: 0 1px}
b.r2{margin: 0 2px}
.content{height:22px;text-align:center; padding-top:10px; background: #99cc33;color:#fff;font-size:12px;}
</style>
</head>
<body>
<div class="main">
<b class="rounder"><b class="r2"></b><b class="r1"></b></b>
<div class="content">这是内容!</div>
<b class="rounder"><b class="r1"></b><b class="r2"></b></b>
</div>
</body>
</html>
从中我们可以看出：如果一个页面多次引用这样的圆角矩形，如果想用不同的颜色外观及角度的话，那么我们就需要多次设置b的background属性、设置多个r1/r2/r3/r4......，才能满足需求，这样无疑会增加样式表的体积，所以在下疯了一把，设置了一个函数来实现，呵呵
函数内容：
程序代码
function rounder(r_color,r_degree,v)
{
r_color=r_color
r_degree=r_degree
v=v
code="<b style='display:block;background: #FFF'>"
if v=top then
for i=0 to r_degree-1
code=code&"<b style='display:block;height:1px;overflow: hidden; background:'" &r_color & ";margin:0px " & r_degree-i &"px;'></b>"
next
elseif v=bottom then
for i=1 to r_degree
code=code&"<b style='display:block;height:1px;overflow: hidden; background:'" &r_color & ";margin:0px " & i &"px;'></b>"
next
end if
code=code&"</b>"
response.Write(code)
}
在这个函数里的三个参数，一目了然，r_color表示矩形的背景色，r_degree表示矩形的圆角的度数，v代表矩形的上部还是下部，可取值top或bottom。
引用时我们只需在页面要引用的部位加入以下代码即可：
程序代码
rounder(#99cc33，5，top)
<div class="content">这里放置显示的内容！</div>
rounder(#99cc33，5，bottom)
这样是不是很方便呢，在一个页面里面就可以多次引用了，呵呵
权当娱乐，任君思维。
