原理分析：
在這裏，利用的是像素點繪製圓角的方法，先看一個用像素繪製的圓角：
擴大了就是這樣：
我們把它分作若干個部分來寫樣式，請看圖示：
看過demo的朋友應該知道了我所描述的幾大優勢：
1. 無論是在橫向還是縱向上都保持着無限的擴展性。
2. 沒有hack，且不易出現瀏覽器兼容性問題。
3. 圓角顏色易自定義。
4. 圓角大小可自定義。
5. 圓角模式易自定義。
6. 可以存在於任意背景中。
7. html結構清晰。
接下來我們逐個分析：
1. 無論是在橫向還是縱向上都保持着無限的擴展性。
試着修改box的width、content的height，就能看到效果。
2. 沒有hack，且不易出現瀏覽器兼容性問題。
這個大家用各種瀏覽器試試就知道了，該演示僅在IE6/FF2/OP9下通過測試，但個人覺得多數瀏覽器應該沒什麼問題，因爲用到的樣式都很基礎。
3. 圓角顏色易自定義。
大家試着將這段樣式複製到已有樣式的最後面。
程序代碼/*---定義邊框顏色---*/
.box .r2,
.box .r3,
.box .r4,
.box .content {
border-color:#2d437b;
}
.box .r1 {
background:#2d437b;
}
/*---定義背景顏色---*/
.box .r2,
.box .r3,
.box .r4,
.box .content {
background:#f3fdff;
}
.box .r2,
.box .r3,
.box .r4,
.box .content {
border-color:#2d437b;
}
.box .r1 {
background:#2d437b;
}
/*---定義背景顏色---*/
.box .r2,
.box .r3,
.box .r4,
.box .content {
background:#f3fdff;
}
效果如下：
HTML代碼<!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">
<style>
body {
color:#000;
background:#999;
font-size:12px;
line-height:1.5;
margin:0;
}
.box {
width:500px;
margin:30px auto;
}
.box .r1 {
height:1px;
overflow:hidden;
margin:0 5px;
background:#f60;
}
.box .r2 {
height:1px;
border-left:2px solid #f60;
border-right:2px solid #f60;
margin:0 3px;
background:#ff0;
overflow:hidden;
}
.box .r3 {
height:1px;
border-left:1px solid #f60;
border-right:1px solid #f60;
margin:0 2px;
background:#ff0;
overflow:hidden;
}
.box .r4 {
height:2px;
border-left:1px solid #f60;
border-right:1px solid #f60;
margin:0 1px;
background:#ff0;
overflow:hidden;
}
.box .content {
background:#ff0;
border-left:1px solid #f60;
border-right:1px solid #f60;
padding:7px 10px;
zoom:1;
}
/*---修改邊框顏色---*/
.box .r2,
.box .r3,
.box .r4,
.box .content {
border-color:#2d437b;
}
.box .r1 {
background:#2d437b;
}
/*---修改背景顏色---*/
.box .r2,
.box .r3,
.box .r4,
.box .content {
background:#f3fdff;
}
</style>
<body>
<div class="box">
<div class="top">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
</div>
<div class="content">
<p>
這樣形成的圓角，是具備多種優勢的：<br />
1. 無論是在橫向還是縱向上都保持着無限的擴展性。(試着修改box的width、content的height。)<br />
2. 沒有hack，且不易出現瀏覽器兼容性問題。<br />
3. 圓角顏色易自定義。<br />
4. 圓角大小可自定義。(試着將class="box"的修改爲class="box2"。)<br />
5. 圓角模式易自定義。<br />
6. 可以存在於任意背景中。(試着修改body的background。)<br />
7. html結構清晰。
</p>
</div>
<div class="bottom">
<div class="r4"></div>
<div class="r3"></div>
<div class="r2"></div>
<div class="r1"></div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<style>
body {
color:#000;
background:#999;
font-size:12px;
line-height:1.5;
margin:0;
}
.box {
width:500px;
margin:30px auto;
}
.box .r1 {
height:1px;
overflow:hidden;
margin:0 5px;
background:#f60;
}
.box .r2 {
height:1px;
border-left:2px solid #f60;
border-right:2px solid #f60;
margin:0 3px;
background:#ff0;
overflow:hidden;
}
.box .r3 {
height:1px;
border-left:1px solid #f60;
border-right:1px solid #f60;
margin:0 2px;
background:#ff0;
overflow:hidden;
}
.box .r4 {
height:2px;
border-left:1px solid #f60;
border-right:1px solid #f60;
margin:0 1px;
background:#ff0;
overflow:hidden;
}
.box .content {
background:#ff0;
border-left:1px solid #f60;
border-right:1px solid #f60;
padding:7px 10px;
zoom:1;
}
/*---修改邊框顏色---*/
.box .r2,
.box .r3,
.box .r4,
.box .content {
border-color:#2d437b;
}
.box .r1 {
background:#2d437b;
}
/*---修改背景顏色---*/
.box .r2,
.box .r3,
.box .r4,
.box .content {
background:#f3fdff;
}
</style>
<body>
<div class="box">
<div class="top">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
</div>
<div class="content">
<p>
這樣形成的圓角，是具備多種優勢的：<br />
1. 無論是在橫向還是縱向上都保持着無限的擴展性。(試着修改box的width、content的height。)<br />
2. 沒有hack，且不易出現瀏覽器兼容性問題。<br />
3. 圓角顏色易自定義。<br />
4. 圓角大小可自定義。(試着將class="box"的修改爲class="box2"。)<br />
5. 圓角模式易自定義。<br />
6. 可以存在於任意背景中。(試着修改body的background。)<br />
7. html結構清晰。
</p>
</div>
<div class="bottom">
<div class="r4"></div>
<div class="r3"></div>
<div class="r2"></div>
<div class="r1"></div>
</div>
</div>
</body>
</html>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
4. 圓角大小可自定義。
以同樣的方式，將以下代碼加入源碼中，然後試着將class="box"修改爲class="box2"試試。（也就是說，用戶只需要告訴你他需要的是box1還是box2，你就能給他所需要的圓角。）
程序代碼/*---修改圓角大小---*/
.box2 {
width:500px;
margin:30px auto;
}
.box2 .r1 {
height:1px;
overflow:hidden;
margin:0 2px;
background:#f60;
}
.box2 .r2 {
height:1px;
overflow:hidden;
margin:0 1px;
border-left:1px solid #f60;
border-right:1px solid #f60;
background:#ff0;
}
.box2 .content {
background:#ff0;
border-left:1px solid #f60;
border-right:1px solid #f60;
padding:7px 10px;
zoom:1;
}
.box2 {
width:500px;
margin:30px auto;
}
.box2 .r1 {
height:1px;
overflow:hidden;
margin:0 2px;
background:#f60;
}
.box2 .r2 {
height:1px;
overflow:hidden;
margin:0 1px;
border-left:1px solid #f60;
border-right:1px solid #f60;
background:#ff0;
}
.box2 .content {
background:#ff0;
border-left:1px solid #f60;
border-right:1px solid #f60;
padding:7px 10px;
zoom:1;
}
效果如下：
HTML代碼<!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">
<style>
body {
color:#000;
background:#999;
font-size:12px;
line-height:1.5;
margin:0;
}
.box {
width:500px;
margin:30px auto;
}
.box .r1 {
height:1px;
overflow:hidden;
margin:0 5px;
background:#f60;
}
.box .r2 {
height:1px;
border-left:2px solid #f60;
border-right:2px solid #f60;
margin:0 3px;
background:#ff0;
overflow:hidden;
}
.box .r3 {
height:1px;
border-left:1px solid #f60;
border-right:1px solid #f60;
margin:0 2px;
background:#ff0;
overflow:hidden;
}
.box .r4 {
height:2px;
border-left:1px solid #f60;
border-right:1px solid #f60;
margin:0 1px;
background:#ff0;
overflow:hidden;
}
.box .content {
background:#ff0;
border-left:1px solid #f60;
border-right:1px solid #f60;
padding:7px 10px;
zoom:1;
}
/*---修改邊框顏色---*/
.box .r2,
.box .r3,
.box .r4,
.box .content {
border-color:#2d437b;
}
.box .r1 {
background:#2d437b;
}
/*---修改背景顏色---*/
.box .r2,
.box .r3,
.box .r4,
.box .content {
background:#f3fdff;
}
/*---修改圓角大小---*/
.box2 {
width:500px;
margin:30px auto;
}
.box2 .r1 {
height:1px;
overflow:hidden;
margin:0 2px;
background:#f60;
}
.box2 .r2 {
height:1px;
overflow:hidden;
margin:0 1px;
border-left:1px solid #f60;
border-right:1px solid #f60;
background:#ff0;
}
.box2 .content {
background:#ff0;
border-left:1px solid #f60;
border-right:1px solid #f60;
padding:7px 10px;
zoom:1;
}
</style>
<body>
<div class="box2">
<div class="top">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
</div>
<div class="content">
<p>
這樣形成的圓角，是具備多種優勢的：<br />
1. 無論是在橫向還是縱向上都保持着無限的擴展性。(試着修改box的width、content的height。)<br />
2. 沒有hack，且不易出現瀏覽器兼容性問題。<br />
3. 圓角顏色易自定義。<br />
4. 圓角大小可自定義。(試着將class="box"的修改爲class="box2"。)<br />
5. 圓角模式易自定義。<br />
6. 可以存在於任意背景中。(試着修改body的background。)<br />
7. html結構清晰。
</p>
</div>
<div class="bottom">
<div class="r4"></div>
<div class="r3"></div>
<div class="r2"></div>
<div class="r1"></div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<style>
body {
color:#000;
background:#999;
font-size:12px;
line-height:1.5;
margin:0;
}
.box {
width:500px;
margin:30px auto;
}
.box .r1 {
height:1px;
overflow:hidden;
margin:0 5px;
background:#f60;
}
.box .r2 {
height:1px;
border-left:2px solid #f60;
border-right:2px solid #f60;
margin:0 3px;
background:#ff0;
overflow:hidden;
}
.box .r3 {
height:1px;
border-left:1px solid #f60;
border-right:1px solid #f60;
margin:0 2px;
background:#ff0;
overflow:hidden;
}
.box .r4 {
height:2px;
border-left:1px solid #f60;
border-right:1px solid #f60;
margin:0 1px;
background:#ff0;
overflow:hidden;
}
.box .content {
background:#ff0;
border-left:1px solid #f60;
border-right:1px solid #f60;
padding:7px 10px;
zoom:1;
}
/*---修改邊框顏色---*/
.box .r2,
.box .r3,
.box .r4,
.box .content {
border-color:#2d437b;
}
.box .r1 {
background:#2d437b;
}
/*---修改背景顏色---*/
.box .r2,
.box .r3,
.box .r4,
.box .content {
background:#f3fdff;
}
/*---修改圓角大小---*/
.box2 {
width:500px;
margin:30px auto;
}
.box2 .r1 {
height:1px;
overflow:hidden;
margin:0 2px;
background:#f60;
}
.box2 .r2 {
height:1px;
overflow:hidden;
margin:0 1px;
border-left:1px solid #f60;
border-right:1px solid #f60;
background:#ff0;
}
.box2 .content {
background:#ff0;
border-left:1px solid #f60;
border-right:1px solid #f60;
padding:7px 10px;
zoom:1;
}
</style>
<body>
<div class="box2">
<div class="top">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
</div>
<div class="content">
<p>
這樣形成的圓角，是具備多種優勢的：<br />
1. 無論是在橫向還是縱向上都保持着無限的擴展性。(試着修改box的width、content的height。)<br />
2. 沒有hack，且不易出現瀏覽器兼容性問題。<br />
3. 圓角顏色易自定義。<br />
4. 圓角大小可自定義。(試着將class="box"的修改爲class="box2"。)<br />
5. 圓角模式易自定義。<br />
6. 可以存在於任意背景中。(試着修改body的background。)<br />
7. html結構清晰。
</p>
</div>
<div class="bottom">
<div class="r4"></div>
<div class="r3"></div>
<div class="r2"></div>
<div class="r1"></div>
</div>
</div>
</body>
</html>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
5. 圓角模式易自定義。
同樣的方式，大家將以下樣式添加進去試試？
程序代碼/*---修改圓角模式---*/
.box .top .r1,
.box .top .r2,
.box .top .r3,
.box .top .r4 {
margin-right:0;
border-right:1px;
}
.box .bottom .r1,
.box .bottom .r2,
.box .bottom .r3,
.box .bottom .r4 {
margin-left:0;
border-left:1px;
}
.box .top .r1,
.box .top .r2,
.box .top .r3,
.box .top .r4 {
margin-right:0;
border-right:1px;
}
.box .bottom .r1,
.box .bottom .r2,
.box .bottom .r3,
.box .bottom .r4 {
margin-left:0;
border-left:1px;
}
效果如下：
HTML代碼<!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">
<style>
body {
color:#000;
background:#999;
font-size:12px;
line-height:1.5;
margin:0;
}
.box {
width:500px;
margin:30px auto;
}
.box .r1 {
height:1px;
overflow:hidden;
margin:0 5px;
background:#f60;
}
.box .r2 {
height:1px;
border-left:2px solid #f60;
border-right:2px solid #f60;
margin:0 3px;
background:#ff0;
overflow:hidden;
}
.box .r3 {
height:1px;
border-left:1px solid #f60;
border-right:1px solid #f60;
margin:0 2px;
background:#ff0;
overflow:hidden;
}
.box .r4 {
height:2px;
border-left:1px solid #f60;
border-right:1px solid #f60;
margin:0 1px;
background:#ff0;
overflow:hidden;
}
.box .content {
background:#ff0;
border-left:1px solid #f60;
border-right:1px solid #f60;
padding:7px 10px;
zoom:1;
}
/*---修改邊框顏色---*/
.box .r2,
.box .r3,
.box .r4,
.box .content {
border-color:#2d437b;
}
.box .r1 {
background:#2d437b;
}
/*---修改背景顏色---*/
.box .r2,
.box .r3,
.box .r4,
.box .content {
background:#f3fdff;
}
/*---修改圓角大小---*/
.box2 {
width:500px;
margin:30px auto;
}
.box2 .r1 {
height:1px;
overflow:hidden;
margin:0 2px;
background:#f60;
}
.box2 .r2 {
height:1px;
overflow:hidden;
margin:0 1px;
border-left:1px solid #f60;
border-right:1px solid #f60;
background:#ff0;
}
.box2 .content {
background:#ff0;
border-left:1px solid #f60;
border-right:1px solid #f60;
padding:7px 10px;
zoom:1;
}
/*---修改圓角模式---*/
.box .top .r1,
.box .top .r2,
.box .top .r3,
.box .top .r4 {
margin-right:0;
border-right:1px;
}
.box .bottom .r1,
.box .bottom .r2,
.box .bottom .r3,
.box .bottom .r4 {
margin-left:0;
border-left:1px;
}
</style>
<body>
<div class="box">
<div class="top">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
</div>
<div class="content">
<p>
這樣形成的圓角，是具備多種優勢的：<br />
1. 無論是在橫向還是縱向上都保持着無限的擴展性。(試着修改box的width、content的height。)<br />
2. 沒有hack，且不易出現瀏覽器兼容性問題。<br />
3. 圓角顏色易自定義。<br />
4. 圓角大小可自定義。(試着將class="box"的修改爲class="box2"。)<br />
5. 圓角模式易自定義。<br />
6. 可以存在於任意背景中。(試着修改body的background。)<br />
7. html結構清晰。
</p>
</div>
<div class="bottom">
<div class="r4"></div>
<div class="r3"></div>
<div class="r2"></div>
<div class="r1"></div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<style>
body {
color:#000;
background:#999;
font-size:12px;
line-height:1.5;
margin:0;
}
.box {
width:500px;
margin:30px auto;
}
.box .r1 {
height:1px;
overflow:hidden;
margin:0 5px;
background:#f60;
}
.box .r2 {
height:1px;
border-left:2px solid #f60;
border-right:2px solid #f60;
margin:0 3px;
background:#ff0;
overflow:hidden;
}
.box .r3 {
height:1px;
border-left:1px solid #f60;
border-right:1px solid #f60;
margin:0 2px;
background:#ff0;
overflow:hidden;
}
.box .r4 {
height:2px;
border-left:1px solid #f60;
border-right:1px solid #f60;
margin:0 1px;
background:#ff0;
overflow:hidden;
}
.box .content {
background:#ff0;
border-left:1px solid #f60;
border-right:1px solid #f60;
padding:7px 10px;
zoom:1;
}
/*---修改邊框顏色---*/
.box .r2,
.box .r3,
.box .r4,
.box .content {
border-color:#2d437b;
}
.box .r1 {
background:#2d437b;
}
/*---修改背景顏色---*/
.box .r2,
.box .r3,
.box .r4,
.box .content {
background:#f3fdff;
}
/*---修改圓角大小---*/
.box2 {
width:500px;
margin:30px auto;
}
.box2 .r1 {
height:1px;
overflow:hidden;
margin:0 2px;
background:#f60;
}
.box2 .r2 {
height:1px;
overflow:hidden;
margin:0 1px;
border-left:1px solid #f60;
border-right:1px solid #f60;
background:#ff0;
}
.box2 .content {
background:#ff0;
border-left:1px solid #f60;
border-right:1px solid #f60;
padding:7px 10px;
zoom:1;
}
/*---修改圓角模式---*/
.box .top .r1,
.box .top .r2,
.box .top .r3,
.box .top .r4 {
margin-right:0;
border-right:1px;
}
.box .bottom .r1,
.box .bottom .r2,
.box .bottom .r3,
.box .bottom .r4 {
margin-left:0;
border-left:1px;
}
</style>
<body>
<div class="box">
<div class="top">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
</div>
<div class="content">
<p>
這樣形成的圓角，是具備多種優勢的：<br />
1. 無論是在橫向還是縱向上都保持着無限的擴展性。(試着修改box的width、content的height。)<br />
2. 沒有hack，且不易出現瀏覽器兼容性問題。<br />
3. 圓角顏色易自定義。<br />
4. 圓角大小可自定義。(試着將class="box"的修改爲class="box2"。)<br />
5. 圓角模式易自定義。<br />
6. 可以存在於任意背景中。(試着修改body的background。)<br />
7. html結構清晰。
</p>
</div>
<div class="bottom">
<div class="r4"></div>
<div class="r3"></div>
<div class="r2"></div>
<div class="r1"></div>
</div>
</div>
</body>
</html>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
6. 可以存在於任意背景中。
因爲是模擬的像素圖，所以多餘的部分都是全透明的，大家試着修改一下body的background就行了。
7. html結構清晰。