圆角矩形大小怎么调整html,html圆角矩形

今天在看一个网站时，看到许多圆角矩形，全是用图画得，记得前一段时间看到用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、内容部分：

这是内容!

实际效果：

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;}

这是内容!

从中我们可以看出：如果一个页面多次引用这样的圆角矩形，如果想用不同的颜色外观及角度的话，那么我们就需要多次设置b的background属性、设置多个r1/r2/r3/r4......，才能满足需求，这样无疑会增加样式表的体积，所以在下疯了一把，设置了一个函数来实现，呵呵

函数内容：

function rounder(r_color,r_degree,v)

{

r_color=r_color

r_degree=r_degree

v=v

code=""

if v=top then

for i=0 to r_degree-1

code=code&""

next

elseif v=bottom then

for i=1 to r_degree

code=code&""

next

end if

code=code&""

response.Write(code)

}

在这个函数里的三个参数，一目了然，r_color表示矩形的背景色，r_degree表示矩形的圆角的度数，v代表矩形的上部还是下部，可取值top或bottom。

引用时我们只需在页面要引用的部位加入以下代码即可：

rounder(#99cc33，5，top)

这里放置显示的内容！

rounder(#99cc33，5，bottom)

这样是不是很方便呢，在一个页面里面就可以多次引用了，呵呵

另外一个例子：

CSS 圆角矩形

示例如下:

div+CSS圆角矩形

body{padding: 20px;background-color: #FFF;font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif}

div#nifty{ margin: 0 10%;background: #9BD1FA}

p {padding:10px}

div.rtop, div.rbottom{display:block;background: #FFF} div.rtop div, div.rbottom div{display:block;height: 1px;overflow: hidden; background: #9BD1FA} div.r1{margin: 0 5px} div.r2{margin: 0 3px} div.r3{margin: 0 2px} div.rtop div.r4, div.rbottom div.r4{margin: 0 1px;height: 2px}

CSS 学习指南