純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 id="iwvjtn8m0" class=page1> <p align="center" class="pageLink"></p> </div> <div id="iwvjtn8m0" 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 id="iwvjtn8m0" 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">

學習交流