不用图片的DIV+CSS圆角边框的实现方法其实很简单，就是利用<b>或<span>等标签做阶梯状堆放来实现CSS圆角边框。其中一个关键的技术就是把这些标签设置样式为：display:block; 且看如下代码：
<b style="display: block; margin: 0 5px; height: 1px;"></b>
<b style="display: block; margin: 0 3px; height: 1px;"></b>
<b style="display: block; margin: 0 2px; height: 1px;"></b>
<b style="display: block; margin: 0 1px; height: 2px;"></b>
如果您对CSS有些了解，应该能想到这四行代码的意义。它们通过margin使得左右两边的空白边距由上至下左键缩小，此时您可能就意识了两个CSS圆角边框就这么产生了。
下面代码是一个完整的不用图片就实现CSS圆角边框的例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CSS圆角边框</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<style type="text/css">
div.RoundedCorner{
font-size:12px; width: 200px; background:#B3D580; }
b.rtop, b.rbottom{
display:block; background: #FFF; }
b.rtop b, b.rbottom b{
display:block; height:1px; overflow:hidden; background:#B3D580; }
b.r1{
margin:0 5px; }
b.r2{
margin:0 3px; }
b.r3{
margin:0 2px; }
b.rtop b.r4, b.rbottom b.r4{
margin:0 1px; height: 2px; }
div.rtit{ clear:both; color:#fff; padding:0 8px 0 5px; }
div.rtit em{ display:block; float:left; color:#2B8100; font-weight:bold; font-style:normal; }
div.rtit span{ float:right; }
div.rbg{
clear:both; margin:2px; padding:5px; height:100%; background:#fff; }
div.rbg ul{
clear:both; margin:0; padding:0; list-style:none; line-height:25px; border-bottom:1px #ECF4DF solid; }
div.rbg ul a{
float:left; }
div.rbg ul span{
float:right; }
</style>
</head>
<body>
<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="rtit">
<em>小说阅读排行</em><span>more</span>
</div>
<div class="rbg">
<ul><a href="#">斗破苍穹</a><span>225753</span></ul>
<ul><a href="#">异界九死神功</a><span>108498 </span></ul>
<ul><a href="#">盘龙</a><span>106504</span></ul>
<ul><a href="#">穴修</a><span>73800</span></ul>
<ul><a href="#">陈二狗的妖孽人生</a><span>70422</span></ul>
<ul><a href="#">骇客</a><span>68121</span></ul>
<ul><a href="#">网游之精灵道士</a><span>59214</span></ul>
<ul><a href="#">斗罗大陆</a><span>58559</span></ul>
<ul><a href="#">极品小公子</a><span>57366</span></ul>
<ul><a href="#">吸血皇朝</a><span>53408</span></ul>
<ul><a href="#">神也玩转网游</a><span>47929</span></ul>
<ul><a href="#">班花</a><span>45728</span></ul>
<ul><a href="#">禁法勿炼</a><span>45491</span></ul>
<ul><a href="#">凡人修仙传</a><span>45338</span></ul>
<ul><a href="#">逍行纪</a><span>40817</span></ul>
</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>
Copyright © 2009