<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Div+css圓角實現(xiàn)，阿賽特效精選</title>
<style type="text/css">
.y1{display:block;overflow:hidden;height:1px;margin:0 4px;border-left:1px solid #B2D0EA;border-right:1px solid #B2D0EA;background:#B2D0EA;}
.y2{display:block;overflow:hidden;height:1px;margin:0 3px;border-left:1px solid #B2D0EA;border-right:1px solid #B2D0EA;background:#B2D0EA;}
.y3{display:block;overflow:hidden;height:1px;margin:0 2px;border-left:1px solid #B2D0EA;border-right:1px solid #B2D0EA;background:#EDF7FF;}
.y4{display:block;overflow:hidden;height:1px;margin:0 1px;border-left:1px solid #B2D0EA;border-right:1px solid #B2D0EA;background:#EDF7FF;}
.yt{border-left:1px solid #B2D0EA;border-right:1px solid #B2D0EA;background:#EDF7FF;padding:5px 8px;}
.yc{border-left:1px solid #B2D0EA;border-right:1px solid #B2D0EA;padding:5px 8px;}
</style>
</head>
<body>
<div>
<!--<p class="y1"></p>-->
<p class="y2"></p>
<p class="y3"></p>
<p class="y4"></p>
<div class="yt">標(biāo)題欄</div>
<div class="yc">
實現(xiàn)原理：<br />
1，首先使用P標(biāo)簽，第一行距Div的邊距為一個數(shù)值（假設(shè)為3px;）； <br />
2，第二個p標(biāo)簽在第一個的下一行，距Div的邊距為第一行的減去一個像素數(shù)值（假設(shè)為2px;）； <br />
3，依次實現(xiàn)，直到最后一個p標(biāo)簽的值為1px； <br />
4，第一行全顯示，后面的只顯示兩頭的一個像素即可。 <br />
5，再配合中間的DIV顯示兩頭的線框，即可實現(xiàn)<br />
</div>
<p class="y4"></p>
<p class="y3"></p>
<p class="y2"></p>
<!--<p class="y1"></p>-->
</div>
</body>
</html>
