纯DIV+CSS实现圆角代码

Div切圆角的实现原理：
1，首先使用p标签，第一行距Div的边距为一个数值（假设为3px; ）；
2，第二个p标签在第一个的下一行，距Div的边距为第一行的减去一个像素数值（假设为2px; ）；
3，依次实现，直到最后一个p标签的值为1px；
4，第一行全显示，后面的只显示两头的一个像素即可。
5，再配合中间的DIV显示两头的线框，即可实现
!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圆角实现/title> 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; /*线的高度为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; } /style> !--Div切圆角的实现原理： 1，首先使用P标签，第一行距Div的边距为一个数值（假设为3px; ）； 2，第二个p标签在第一个的下一行，距Div的边距为第一行的减去一个像素数值（假设为2px; ）； 3，依次实现，直到最后一个p标签的值为1px； 4，第一行全显示，后面的只显示两头的一个像素即可。 5，再配合中间的DIV显示两头的线框，即可实现--> /head> body> div> !--p class="one"> /p> --> p class="two"> /p> p class="three"> /p> p class="four"> /p> div class="rou2"> 标题栏 /div> div class="rou"> 内容页！ /div> p class="four"> /p> p class="three"> /p> p class="two"> /p> !--p class="one"> /p> --> /div> /body> /html>
ffcod = delpost.runcode1 .value; ffcod = ffcod.replace(/
/g,''); delpost.runcode1 .value = ffcod; 提示：您可以先修改部分代码再运行@H_777_18@

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！