本文和大家重點討論一下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。
【編輯推薦】