CSS+DIV實現圓角表格的三種方法
作者：admin
CSS+DIV網頁布局有很多值得學習的地方，本文向大家簡單介紹一下CSS+DIV實現圓角表格的三種方法，希望對你的學習有所幫助。
本文和大家重點討論一下CSS+DIV實現圓角表格的三種方法，相信本文介紹一定會讓你有所收獲。
CSS+DIV實現圓角表格的三種方法
很多網頁上都有圓角表格，讓人看起來非常舒服。今天向大家講解CSS+DIV實現圓角表格的三種方法。
方法一：網上流傳最多的DIV圓角方式，完整代碼如下；
- <html>
- <head>
- <title>CSS實現DIV圓角的三種方法</title>
- <metahttp-equivmetahttp-equiv="content-type"content="text/html;charset=gb2312">
- <styletypestyletype="text/css">
- <!--
- body{color:#fff;}
- div.RoundedCorner{background:black}
- b.R_top,b.R_bottom{display:block;background:#FFFFFF}
- b.R_topb,b.R_bottomb{display:block;height:1px;overflow:hidden;background:black}
- b.R_1{margin:05px}
- b.R_2{margin:03px}
- b.R_3{margin:02px}
- b.R_topb.R_4,b.R_bottomb.R_4{margin:01px;height:2px}
- -->
- </style>
- </head>
- <body>
- <divclassdivclass="RoundedCorner">
- <bclassbclass="R_top">
- <bclassbclass="R_1"></b>
- <bclassbclass="R_2"></b>
- <bclassbclass="R_3"></b>
- <bclassbclass="R_4"></b>
- </b>
- <p>圓角DIV內容</p>
- <bclassbclass="R_bottom">
- <bclassbclass="R_4"></b>
- <bclassbclass="R_3"></b>
- <bclassbclass="R_2"></b>
- <bclassbclass="R_1"></b>
- </b>
- </div>
- </body>
- </html>
總結：此方法靈活性較好，但調用麻煩，每次調用，DIV前后都需要加上如此多的代碼，而且圓角的半徑不好調。
方法二：使用background-image方法，使DIV出現圓角背景圖片；這個方法需要事先在PS或FW畫好一張圓角的背景圖片；
示例：
- div{background:url(圖片url)no-repeat;}
總結：此方法適合用于特別位置，調用方法最簡單，但靈活性不夠好。要改變表格大小，必須重新做圓角背景圖片。
方法三：
同樣background-image方法，使DIV出現圓角底景圖片；這個方法需要事先在PS或FW畫好一張圓角的背景圖片；但這個方法需要分成三個DIV實現，***個DIV放上圓角背景的最左邊部分，中間的DIV使用1像素背景填充，第三個DIV放上圓角背景的最右邊部分；
示例：
- div_l{float:left;background:url(圓角背景的最左邊部分圖片url)no-repeat;} /*自行設置高度，寬度*/
- div_m{float:left;background:url(1像素背景填充圖片url)repeat-x;} /*自行設置高度，寬度，背景圖片橫向重復*/
- div_r{float:left;background:url(圓角背景的最右邊部分圖片url)no-repeat;} /*自行設置高度，寬度*/
- <divclassdivclass="div_l"></div>
- <divclassdivclass="div_m">DIV內容DIV內容</div>
- <divclassdivclass="div_r"></div>
總結：此方法步驟較多，但靈活性較好，適用于任意寬度的圓角DIV。
【編輯推薦】
責任編輯：佚名
來源：
xin126.cn
