爲了方便看每一個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