CSS模擬圓角

CSS模擬圓角

 

<html>  
<head>  
<style type="text/css">  
div#nifty {width: 200px; background: #000000}  
b.rtop, b.rbottom {display: block; background: #FFF}  
b.rtop b, b.rbottom b {display: block; height: 1px; overflow: hidden; background: #000000}  
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="text-align: center"><img src="http://tw.i4.yimg.com/i/tw/hp/spirit/yahoo_logo.gif"></div>  
    <b class="rbottom">  
  <b class="r4"></b>  
  <b class="r3"></b>  
  <b class="r2"></b>  
  <b class="r1"></b>  
    </b>  
</div>  
</body>  
</html>