posts - 431,  comments - 344,  trackbacks - 0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>无图片圆角实现 </TITLE>
  <style type="text/css">
 div#box{
 margin:0 20px;
 width:200px;
 background: #FF9E3E;
 text-align:center;
 }

 b.rtop, b.rbottom{display:block; background: #FFF;}
 b.rtop b, b.rbottom b{display:block;height: 1px;
  overflow: hidden; background: #FF9E3E;}
 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}
 .prod_title{
  color:#804000;
  text-align:center;
  font-size:14px;
  font-weight: bold;
  padding: 5px 5px;
 }

 div.details{
  padding:2px;
  font-size:11px;
  text-align:left;
 }
 .box_center{
  width:200px;
  height:150px;
  padding: 2px;
 }

 a.more{
  font-style:italic;
  color:#804000;
  float:right;
  text-decoration:none;
  font-size:11px;
  padding:0px 15px 0 0;
 }
  </style>
 </HEAD>

 <BODY>
  <div id="box">
   <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
    <div class="box_center">
      <div class="prod_title">圆角测试</div>
      <div class="details">内容信息</div>
      <a href="#" class="more">- 详细信息 -</a>
      <div class="clear"></div>
    </div>
   <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
   </div>
 </BODY>
</HTML>

posted on 2009-05-31 08:55 周锐 阅读(209) 评论(0)  编辑  收藏 所属分类: CSS

只有注册用户登录后才能发表评论。


网站导航: