<!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
周銳 閱讀(223)
評論(0) 編輯 收藏 所屬分類:
CSS