css寫圓角附帶解說

爲了方便看每一個div層的位置及意義我給沒個div加了不一樣的顏色,其中overflow:hidden;overflow:hidden的做用是隱藏溢出,即超出部分隱藏。是實現圓角的關鍵。css

<style type="text/css">
#mid
{   width:500px;
height:100%;
 margin:0px 50px;
 background:#08c;
 font-size:9px;
}
.rtop
{
 display:block;
 background:#08c;
}
.rtop div
{
 display:block;
 height:1px;
 overflow:hidden;
 
}
.r1
{
 margin:0 3px;
 background-color:#F00; 
}
.r2
{
 margin:0 2px;
 background-color:#0F0;
}
.r3
{
 margin:0 1px;
 background-color:#00F;
}
.r4
{
 margin:0 1px;
 background-color:#F0F;
}html


</style>
</head>
<body>
     <div id="mid">
                   <div class="rtop">
                                    <div class="r1"></div>
                                    <div class="r2"></div>
                                    <div class="r3"></div>
                                    <div class="r4"></div>
                   </div>   
                  
                  
                  
                                
                   <div class="rtop">
                                    <div class="r4"></div>
                                    <div class="r3"></div>
                                    <div class="r2"></div>
                                    <div class="r1"></div>
                   </div>
     </div>
</body>
</html>web

相關文章
相關標籤/搜索