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" />
<style type="text/css">
<!–
* { margin:0; padding:0; }
body { font: 11px Arial, sans-serif; padding: 10px; color: #333; }
a { text-decoration:none; }
a:hover { text-decoration: underline; }
/* 以下为纯CSS圆角 */
.box { padding: 10px; border-right: 1px solid #09C; border-left: 1px solid #09C; }
b, u, i { display: block; height: 1px; overflow: hidden; }
/* 第一种圆角 */
b.f1 { margin: 0 4px; background: #09C; }
b.f2 { margin: 0 2px; border-right: 2px solid #09C; border-left: 2px solid #09C; }
b.f3 { height: 2px; margin: 0 1px; border-right: 1px solid #09C; border-left: 1px solid #09C; }
/* 第一种圆角结束 */
/* 第二种圆角 */
u.f1 { margin: 0 3px; background: #09C; }
u.f2 { margin: 0 1px; border-right: 2px solid #09C; border-left: 2px solid #09C; }
u.f3 { margin: 0 1px; border-right: 1px solid #09C; border-left: 1px solid #09C; }
/* 第二种圆角结束 */
/* 第三种圆角 */
i { margin: 0px 1px; background: #09C; }
/* 第三种圆角结束 */
–>
</style>
</head>
<body>
<p> </p>
<div style="width:400px;">
	<b class="f1"></b>
	<b class="f2"></b>
	<b class="f3"></b>
	<div class="box">第一种纯CSS圆角，纯CSS的优点是不用到图片，加载比较快，自动延伸不受到图片的影响。</div>
	<b class="f3"></b>
	<b class="f2"></b>
	<b class="f1"></b>
</div>
<p> </p>

<div style="width:300px;">
	<u class="f1"></u>
	<u class="f2"></u>
	<u class="f3"></u>
	<div class="box">第二种纯CSS圆角，和第一种圆角差不多。</div>
	<u class="f3"></u>
	<u class="f2"></u>
	<u class="f1"></u>
</div>
<p> </p>
<div style="width:200px;">
	<i></i>
	<div class="box">第三种纯CSS圆角，这个看不出好大的效果没有技术含量！</div>
	<i></i>
</div>
<p></p>
<p></p>
</body>
</html>