Web and Graphics design
<head>
<style type="text/css">
body{padding: 20px;background-color: #FFF;}
div#nifty{ margin: 0 20%;background: #9BD1FA;}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
overflow: hidden; background: #9BD1FA; }
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}
</style>
</head>
<body >
<div id="nifty">
<b class="rtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
</b>
<div style="height:200px;">
看看是不是圆角
</div>
<b class="rbottom">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b>
</div>
</body>
下面我们把代码用<br />分解一下，看看是怎么做的 效果演示
<head>
<style type="text/css">
body{padding: 20px;background-color: #FFF;}
div#nifty{ margin: 0 20%;background: #9BD1FA;}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
overflow: hidden; background: #9BD1FA; }
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}
</style>
</head>
<body >
<div id="nifty">
<b class="rtop">
<b class="r1"></b><br />
<b class="r2"></b><br />
<b class="r3"></b><br />
<b class="r4"></b><br />
</b>
<div style="height:200px;">
用<br />分开后，看清楚了吧
</div>
<b class="rbottom">
<b class="r4"></b><br />
<b class="r3"></b><br />
<b class="r2"></b><br />
<b class="r1"></b><br />
</b>
</div>
</body>
