CSS+DIV實(shí)現(xiàn)圓角表格的三種方法
作者：admin
CSS+DIV網(wǎng)頁(yè)布局有很多值得學(xué)習(xí)的地方，本文向大家簡(jiǎn)單介紹一下CSS+DIV實(shí)現(xiàn)圓角表格的三種方法，希望對(duì)你的學(xué)習(xí)有所幫助。
本文和大家重點(diǎn)討論一下CSS+DIV實(shí)現(xiàn)圓角表格的三種方法，相信本文介紹一定會(huì)讓你有所收獲。
CSS+DIV實(shí)現(xiàn)圓角表格的三種方法
很多網(wǎng)頁(yè)上都有圓角表格，讓人看起來(lái)非常舒服。今天向大家講解CSS+DIV實(shí)現(xiàn)圓角表格的三種方法。
方法一：網(wǎng)上流傳最多的DIV圓角方式，完整代碼如下；
- <html>
- <head>
- <title>CSS實(shí)現(xiàn)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內(nèi)容</p>
- <bclassbclass="R_bottom">
- <bclassbclass="R_4"></b>
- <bclassbclass="R_3"></b>
- <bclassbclass="R_2"></b>
- <bclassbclass="R_1"></b>
- </b>
- </div>
- </body>
- </html>
總結(jié)：此方法靈活性較好，但調(diào)用麻煩，每次調(diào)用，DIV前后都需要加上如此多的代碼，而且圓角的半徑不好調(diào)。
方法二：使用background-image方法，使DIV出現(xiàn)圓角背景圖片；這個(gè)方法需要事先在PS或FW畫好一張圓角的背景圖片；
示例：
- div{background:url(圖片url)no-repeat;}
總結(jié)：此方法適合用于特別位置，調(diào)用方法最簡(jiǎn)單，但靈活性不夠好。要改變表格大小，必須重新做圓角背景圖片。
方法三：
同樣background-image方法，使DIV出現(xiàn)圓角底景圖片；這個(gè)方法需要事先在PS或FW畫好一張圓角的背景圖片；但這個(gè)方法需要分成三個(gè)DIV實(shí)現(xiàn)，***個(gè)DIV放上圓角背景的最左邊部分，中間的DIV使用1像素背景填充，第三個(gè)DIV放上圓角背景的最右邊部分；
示例：
- div_l{float:left;background:url(圓角背景的最左邊部分圖片url)no-repeat;} /*自行設(shè)置高度，寬度*/
- div_m{float:left;background:url(1像素背景填充圖片url)repeat-x;} /*自行設(shè)置高度，寬度，背景圖片橫向重復(fù)*/
- div_r{float:left;background:url(圓角背景的最右邊部分圖片url)no-repeat;} /*自行設(shè)置高度，寬度*/
- <divclassdivclass="div_l"></div>
- <divclassdivclass="div_m">DIV內(nèi)容DIV內(nèi)容</div>
- <divclassdivclass="div_r"></div>
總結(jié)：此方法步驟較多，但靈活性較好，適用于任意寬度的圓角DIV。
【編輯推薦】
- JavaScript代碼輕松實(shí)現(xiàn)DIV圓角
- CSS中margin邊界疊加問(wèn)題及解決方案
- CSS樣式表高效使用八大秘訣
- 創(chuàng)建和插入CSS樣式表秘笈
- 實(shí)現(xiàn)CSS垂直居中的五大方法及優(yōu)缺點(diǎn)
責(zé)任編輯：佚名
來(lái)源：
xin126.cn
