萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> 純DIV+CSS實現圓角代碼介紹
純DIV+CSS實現圓角代碼介紹
我們為大家收集整理了關於純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" ">
<html xmlns=">
<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>
希望大家可以學會純DIV+CSS實現圓角代碼.想了解更多精彩內容，請關注我們的網站!
相關推薦：
引入CSS樣式的方法是什麼呢
- 上一頁:如何實現DIV遮罩層呢
- 下一頁:引入CSS樣式的方法是什麼呢
