CSS教程,DIV CSS视频教程,DIV CSS模板,DIV CSS布局入门教程 - CSS中国

css做的圆角，一般圆角框最好用背景图片实现，这样兼容性好，css也可以实现，不过有些限制，因为各个浏览器支持的标准不一样 。 并且可以自动自动适应内容大小。

<style type="text/CSS">    
div#nifty{margin:0;background:#9BD1FA}    
p {padding:10px}    
div.rtop {display:block;background:#fff}    
div.rtop div {display:block;height:1px;overflow:hidden;background:#9BD1FA}    
div.r1{margin:0 5px}    
div.r2{margin:0 3px}    
div.r3{margin:0 2px}    
div.rtop div.r4 {margin:0 1px;height:2px}    
</style>    
<div id="nifty">    
    <div class="rtop">    
        <div class="r1"></div>    
        <div class="r2"></div>    
        <div class="r3"></div>    
        <div class="r4"></div>    
    </div>    
    <p>div + CSS 圆角矩形</p>    
    <div class="rtop">    
        <div class="r4"></div>    
        <div class="r3"></div>    
        <div class="r2"></div>    
        <div class="r1"></div>    
    </div>    
</div>    

全圆角

<style type="text/CSS">    
div#nifty{margin:0;background:#9BD1FA}    
p {padding:10px}    
div.rtop {display:block;background:#fff}    
div.rtop div {display:block;height:1px;overflow:hidden;background:#9BD1FA}    
div.r1{margin:0 5px}    
div.r2{margin:0 3px}    
div.r3{margin:0 2px}    
div.rtop div.r4 {margin:0 1px;height:2px}    
</style>    
<div id="nifty">    
    <p>div + CSS 圆角矩形</p>    
    <div class="rtop">    
        <div class="r4"></div>    
        <div class="r3"></div>    
        <div class="r2"></div>    
        <div class="r1"></div>    
    </div>    
</div>   

另一款：
 

<div id="nifty">   
    <b class="rtop"><b class="r1"></b><b class="r2"></b>   
    <b class="r3"></b><b class="r4"></b></b>   
    <h1>演示代码</h1> 
 
    <style type="text/css">   
        body{padding: 20px;background-color: #FFF;   
        font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif}   
        h1,h2,p{margin: 0 10px}   
        h1{font-size: 250%;color: #FFF}   
        h2{font-size: 200%;color: #f0f0f0}   
        p{padding-bottom:1em}   
        h2{padding-top: 0.3em}   
        div#nifty{ margin: 0 10%;background: #9BD1FA}   
        b.rtop, b.rbottom{display:block;background: #FFF}   
        b.rtop b, b.rbottom b{display:block;height: 1px;   
        overflow: hidden; background: #9BD1FA}   
        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> 
 
    <b class="rbottom"><b class="r4"></b><b class="r3"></b>   
    <b class="r2"></b><b class="r1"></b></b>   
    </div>