可自由扩展的圆角矩形制作方法
转自：http://golen.blog.sohu.com/96114249.html
制作一个好的web标准站点,扩展性要多考虑,扩展性做的好的网站,会给后期的维护和升级会带来很大的方便.
现在总结一下我做web以来,可扩展的圆角矩形的制作方法:
方法一:
命名:round.gif:
代码如下:
<!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>
* { font-size:12px}
.roundbox{
position:relative;
border:1px solid #6d298e;
width:400px; /* 根据需要可改变不同的宽度 */
padding:8px;
line-height:22px
}
.roundbox span{
display:block;
position:absolute;
width:5px;
height:5px;
font-size:0
}
.top_left{
left:-1px;
top:-1px;
background:url(round.gif) top left
}
.top_right{
right:-1px;
top:-1px;
background:url(round.gif) top right;
}
.bottom_left {
left:-1px;
bottom:-1px;
background:url(round.gif) bottom left;
}
.bottom_right {
right:-1px;
bottom:-1px;
background:url(round.gif) bottom right;
}
</style>
</head>
<body>
<div class="roundbox">
<span class="top_left"></span>
<span class="top_right"></span>
<span class="bottom_left"></span>
<span class="bottom_right"></span>
这里是一个宽416px的圆角矩形，这里是一个宽416px的圆角矩形，这里是一个宽416px的圆角矩形，这里是一个宽416px的圆角矩形，这里是一个宽416px的圆角矩形
</div>
</body>
</html>
ps:1.css中font-size:0主要是解决IE6.0下的一个bug;
2.我个人比较赞同这种做法.方法一的扩展性做的很好,代码也简洁明了.
方法二:
1.在PS中画一个足够大的圆角矩形(我这里画的是660*339相素,其实还是小了点)
命名:bground.gif
代码如下:
<!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>
* { font-size:12px}
.c,.c i,.c i i,.c b,.c b b,.c p{ background:url(bground.gif) no-repeat
}
.c{
width:200px;/* 根据需要可改变不同的宽度 */
background-position:0 -4px;
}
.c i{
display:block;
height:4px;
font-size:0
}
.c i i{
margin:0 0 0 4px;
background-position:right 0;
}
.c b{
display:block;
height:4px;
background-position:0 bottom;
font-size:0
}
.c b b{
margin:0 0 0 4px;
background-position:right bottom;
}
.c p{
margin:0 0 0 4px;
padding:8px;
background-position:right -4px;
line-height:22px
}
</style>
</head>
<body>
<div class="c">
<i><i></i></i>
<p>
这里是一个宽216px的圆角矩形，这里是一个宽216px的圆角矩形，这里是一个宽216px的圆角矩形，这里是一个宽216px的圆角矩形，
</p>
<b><b></b></b>
</div>
</body>
</html>
ps:这种方法缺点是多了一些无意义的标签,好象在web标准中也不大赞同用<i>这样的标签.
分别预览:
方法三:
纯粹用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>
* { font-size:12px}
.roundbox { width:400px /* 根据需要可改变不同的宽度 */}
.roundbox div { padding:8px; border-left:1px solid #6d298e; border-right:1px solid #6d298e}
.r {border-right:1px solid #6d298e;border-left:1px solid #6d298e;height:1px;font-size:1px;overflow:hidden;display:block;}
.a1 {margin:0 5px; background:#6d298e;}
.a2 {margin:0 3px; border-right-width:2px; border-left-width:2px;}
.a3 {margin:0 2px;}
.a4 {margin:0 1px; height:2px;}
.a5 {height:auto;font-size:medium;}
</style>
</head>
<body>
<div class="roundbox">
<b class="r a1"></b><b class="r a2"></b><b class="r a3"></b><b class="r a4"></b>
<div>这里是一个宽400px的圆角矩形,这里是一个宽400px的圆角矩形,这里是一个宽400px的圆角矩形,这里是一个宽400px的圆角矩形,这里是一个宽400px的圆角矩形,这里是一个宽400px的圆角矩形,这里是一个宽400px的圆角矩形,这里是一个宽400px的圆角矩形,这里是一个宽400px的圆角矩形,</div>
<b class="r a4"></b><b class="r a3"></b><b class="r a2"></b><b class="r a1"></b>
</div>
</body>
</html>
预览:
PS:圆角的地方似乎并不圆滑,而且拐角的弧度也不好控制,感觉这种方法没前两种方法好.
