纯DIV+CSS实现圆角！_html/css_WEB-ITnose

.one
{
display:block;
overflow:hidden;
height:1px;
margin:0 4px;
border-left:1px solid #b2d0ea;
border-right:1px solid #b2d0ea;
background:#b2d0ea;
}
.two
{
display:block;
overflow:hidden;
height:1px;/*线的高度为1px*/
margin:0 3px;/*距离外层div的左右边距各3px*/
border-left:1px solid #b2d0ea;/*只显示线的左边的1px*/
border-right:1px solid #b2d0ea;/*只显示线的右边的1px*/
background:#b2d0ea;/*配合内层div的颜色变化，*/
}
.three
{
display:block;
overflow:hidden;
height:1px;
margin:0 2px;
border-left:1px solid #b2d0ea;
border-right:1px solid #b2d0ea;
background:#edf7ff;
}
.four
{
display:block;
overflow:hidden;
height:1px;
margin:0 1px;
border-left:1px solid #b2d0ea;
border-right:1px solid #b2d0ea;
background:#edf7ff;
}
.rou/*div只显示左右的边框，颜色和p标签的一致*/
{
border-left:1px solid #b2d0ea;
border-right:1px solid #b2d0ea;
}
.rou2
{
border-left:1px solid #b2d0ea;
border-right:1px solid #b2d0ea;
background:#edf7ff;
}

<!–div切圆角的实现原理：
1，首先使用p标签，第一行距div的边距为一个数值（假设为3px;）；
2，第二个p标签在第一个的下一行，距div的边距为第一行的减去一个像素数值（假设为2px;）；
3，依次实现，直到最后一个p标签的值为1px；
4，第一行全显示，后面的只显示两头的一个像素即可。
5，再配合中间的div显示两头的线框，即可实现

–>

  <!–

–>
   

   
     标题栏
   
   
     内容页！
   
   

    <!–

–>