Tip: you can modify some code before running
<p><meta content="text/html; charset=gb2312" http-equiv="Content-Type" /><style type="text/css">. 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;/* The line height is 1px */margin: 0 3px; /* the left and right margins of the outer DIV are 3px */border-left: 1px solid # B2D0EA;/* only 1px on the left of the line */border-right: 1px solid # B2D0EA; /* only display 1px on the right of the line */background: # B2D0EA;/* with the color change of the inner 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 only displays the left and right borders. The color is the same as that of the p label */{border-left: 1px solid # B2D0EA; border-right: 1px solid # B2D0EA ;}. rou2 {border-left: 1px solid # B2D0EA; border-right: 1px solid # B2D0EA; background: # EDF7FF ;}</style></p><!--Div切圆角的实现原理： 1，首先使用P标签，第一行距Div的边距为一个数值（假设为3px;）； 2，第二个p标签在第一个的下一行，距Div的边距为第一行的减去一个像素数值（假设为2px;）； 3，依次实现，直到最后一个p标签的值为1px； 4，第一行全显示，后面的只显示两头的一个像素即可。 5，再配合中间的DIV显示两头的线框，即可实现--><div><!--<p class="one"></p>--><p class="two"> </p><p class="three"> </p><p class="four"> </p><div class="rou2">Title bar</div><div class="rou">Content page!</div><p class="four"> </p><p class="three"> </p><p class="two"> </p><!--<p class="one"></p>--></div>
Tip: you can modify some code before running
