纯DIV+CSS实现圆角代码

2024-07-11 08:38:09

字体：大中小

来源：转载

供稿：网友

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

<br /><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><br /><html xmlns=”http://www.w3.org/1999/xhtml”><br /><head><br /><meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /><br /><title>Div圆角实现</title><br /><style type=”text/css”><br />.one<br />{<br />display:block;<br />overflow:hidden;<br />height:1px;<br />margin:0 4px;<br />border-left:1px solid #B2D0EA;<br />border-right:1px solid #B2D0EA;<br />background:#B2D0EA;<br />}<br />.two<br />{<br />display:block;<br />overflow:hidden;<br />height:1px;/*线的高度为1px*/<br />margin:0 3px;/*距离外层DIV的左右边距各3px*/<br />border-left:1px solid #B2D0EA;/*只显示线的左边的1px*/<br />border-right:1px solid #B2D0EA;/*只显示线的右边的1px*/<br />background:#B2D0EA;/*配合内层Div的颜色变化，*/<br />}<br />.three<br />{<br />display:block;<br />overflow:hidden;<br />height:1px;<br />margin:0 2px;<br />border-left:1px solid #B2D0EA;<br />border-right:1px solid #B2D0EA;<br />background:#EDF7FF;<br />}<br />.four<br />{<br />display:block;<br />overflow:hidden;<br />height:1px;<br />margin:0 1px;<br />border-left:1px solid #B2D0EA;<br />border-right:1px solid #B2D0EA;<br />background:#EDF7FF;<br />}<br />.rou/*DIV只显示左右的边框，颜色和p标签的一致*/<br />{<br />border-left:1px solid #B2D0EA;<br />border-right:1px solid #B2D0EA;<br />}<br />.rou2<br />{<br />border-left:1px solid #B2D0EA;<br />border-right:1px solid #B2D0EA;<br />background:#EDF7FF;<br />}<br /></style><br /><!–Div切圆角的实现原理：<br />1，首先使用P标签，第一行距Div的边距为一个数值（假设为3px;）；<br />2，第二个p标签在第一个的下一行，距Div的边距为第一行的减去一个像素数值（假设为2px;）；<br />3，依次实现，直到最后一个p标签的值为1px；<br />4，第一行全显示，后面的只显示两头的一个像素即可。<br />5，再配合中间的DIV显示两头的线框，即可实现<br />–><br /></head><br /><body><br /><div><br /> <!–<p class=”one”></p>–><br /> <p class=”two”></p><br /> <p class=”three”></p><br /> <p class=”four”></p><br /> <div class=”rou2″><br /> 标题栏<br /> </div> </SPAN> </div> </div> <div class=page1> <p align="center" class="pageLink"></p> </div> <div class="fenxiang">  <div style="text-align:left">上一篇：<a href='/wen/2024/07-11/1342797.html'>网站字体大小 CSS该重新改写？</a></div> <br> <div style="text-align:left">下一篇：<a href='/wen/2024/07-11/1342799.html'>DIV+CSS常见问题的14条原因分析</a></div> <br> <script src=/d/js/acmsd/gao21.js></script>  </div> <div class="pinglun">  <script> function CheckPl(obj) { if(obj.saytext.value=="") { alert("您没什么话要说吗？"); obj.saytext.focus(); return false; } return true; } </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)"> <table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title"> <tr> <td><strong>发表评论</strong></td> <td align="right"><a href="/e/pl/?classid=215&id=1342798">共有<span><script type="text/javascript" src="/e/public/ViewClick/?classid=215&id=1342798&down=2"></script></span>条评论</a></td> </tr> </table> <table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="2"> <tr> <td width="56%" align="left">用户名: <input name="username" type="text" class="inputText" id="username" value="" size="16" /></td> <td width="44%" align="left">密码: <input name="password" type="password" class="inputText" id="password" value="" size="16" /></td> </tr> <tr> <td align="left">验证码: <input name="key" type="text" class="inputText" size="10" /> <img src="/e/ShowKey/?v=pl" align="absmiddle" /> </td> <td align="left"><input name="nomember" type="checkbox" id="nomember" value="1" checked="checked" /> 匿名发表</td> </tr> </table> <textarea name="saytext" cols="70" rows="6" id="saytext">

学习交流