<html>
<head>
<title>CSS圆角矩形效果实现 - Java教程:http://www.javaweb.cc</title>
<style type="text/css">
b{display:block;height:1px;overflow:hidden;background:#f6f6f6}
.top1{width:294px;background:#ccc;margin:0 4px;}
.top2{width:294px;border-left:1px solid #ccc;border-right:1px solid #ccc;margin:0 3px;}
.top3{width:296px;border:1px solid #ccc;border-bottom:none;border-top:none;margin:0 2px;}
.top4{width:298px;border:1px solid #ccc;border-top:none;
border-bottom:none;margin:0 1px;height:2px;}
.text_box{position:relative;width:300px;height:100px;border:1px solid #ccc;
border-top:none;border-bottom:none;background:#f6f6f6}
.sa-bg{display:block;overflow:hidden;width:16px;height:16px;
position:absolute;top:50px;left:-6px;color:#ddd}
.sa{display:block;overflow:hidden;width:16px;height:16px;
position:absolute;top:50px;left:-5px;color:#f6f6f6}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
</head>
<body>
<b class="top1"></b>
<b class="top2"></b>
<b class="top3"></b>
<b class="top4"></b>
<div class="text_box">
<span class="sa-bg"></span><span class="sa"></span>
</div>
<b class="top4"></b>
<b class="top3"></b>
<b class="top2"></b>
<b class="top1"></b>
</body>
</html>