html圆角矩形

最新推荐文章于 2024-08-03 16:18:05 发布

iteye_11495

最新推荐文章于 2024-08-03 16:18:05 发布

阅读量2.4k

点赞数 1

文章标签： xhtml

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

实际效果：

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

从中我们可以看出：如果一个页面多次引用这样的圆角矩形，如果想用不同的颜色外观及角度的话，那么我们就需要多次设置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)

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

另外一个例子：

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" lang="gb2312">
<head>
<meta http-equiv="Content-Type" content="text/HTML; charset=gb2312" />
<title>div+CSS圆角矩形</title>
<style type="text/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}
</style>
</head>
<body>
<div id="nifty">
<div class="rtop"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>
<p>CSS 学习指南</p>
<div class="rtop"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div>
</div>
</body>
</html>