DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS+DIV實現圓角表格的三種方法
CSS+DIV實現圓角表格的三種方法
編輯:CSS詳解     

本文和大家重點討論一下CSS+DIV實現圓角表格的三種方法,相信本文介紹一定會讓你有所收獲。

CSS+DIV實現圓角表格的三種方法

很多網頁上都有圓角表格,讓人看起來非常舒服。今天向大家講解CSS+DIV實現圓角表格的三種方法。

方法一:網上流傳最多的DIV圓角方式,完整代碼如下;

  1. <Html>
  2. <head>
  3. <title>CSS實現DIV圓角的三種方法</title>
  4. <metahttp-equivmetahttp-equiv="content-type"content="text/Html;charset=gb2312">
  5. <styletypestyletype="text/CSS">
  6. <!--
  7. body{color:#fff;}
  8. div.RoundedCorner{background:black}
  9. b.R_top,b.R_bottom{display:block;background:#FFFFFF}
  10. b.R_topb,b.R_bottomb{display:block;height:1px;overflow:hidden;background:black}
  11. b.R_1{margin:05px}
  12. b.R_2{margin:03px}
  13. b.R_3{margin:02px}
  14. b.R_topb.R_4,b.R_bottomb.R_4{margin:01px;height:2px}
  15. -->
  16. </style>
  17. </head>
  18. <body>
  19. <divclassdivclass="RoundedCorner">
  20. <bclassbclass="R_top">
  21. <bclassbclass="R_1"></b>
  22. <bclassbclass="R_2"></b>
  23. <bclassbclass="R_3"></b>
  24. <bclassbclass="R_4"></b>
  25. </b>
  26. <p>圓角DIV內容</p>
  27. <bclassbclass="R_bottom">
  28. <bclassbclass="R_4"></b>
  29. <bclassbclass="R_3"></b>
  30. <bclassbclass="R_2"></b>
  31. <bclassbclass="R_1"></b>
  32. </b>
  33. </div>
  34. </body>
  35. </Html>

總結:此方法靈活性較好,但調用麻煩,每次調用,DIV前後都需要加上如此多的代碼,而且圓角的半徑不好調。

方法二:使用background-image方法,使DIV出現圓角背景圖片;這個方法需要事先在PS或FW畫好一張圓角的背景圖片;

示例:

  1. div{background:url(圖片url)no-repeat;}

總結:此方法適合用於特別位置,調用方法最簡單,但靈活性不夠好。要改變表格大小,必須重新做圓角背景圖片。

方法三:

同樣background-image方法,使DIV出現圓角底景圖片;這個方法需要事先在PS或FW畫好一張圓角的背景圖片;但這個方法需要分成三個DIV實現,第一個DIV放上圓角背景的最左邊部分,中間的DIV使用1像素背景填充,第三個DIV放上圓角背景的最右邊部分;

示例:

  1. div_l{float:left;background:url(圓角背景的最左邊部分圖片url)no-repeat;}/*自行設置高度,寬度*/
  2. div_m{float:left;background:url(1像素背景填充圖片url)repeat-x;}/*自行設置高度,寬度,背景圖片橫向重復*/
  3. div_r{float:left;background:url(圓角背景的最右邊部分圖片url)no-repeat;}/*自行設置高度,寬度*/
  4. <divclassdivclass="div_l"></div>
  5. <divclassdivclass="div_m">DIV內容DIV內容</div>
  6. <divclassdivclass="div_r"></div>

總結:此方法步驟較多,但靈活性較好,適用於任意寬度的圓角DIV。

【編輯推薦】

  1. JavaScript代碼輕松實現DIV圓角
  2. CSS中margin邊界疊加問題及解決方案
  3. CSS樣式表高效使用八大秘訣
  4. 創建和插入CSS樣式表秘笈
  5. 實現CSS垂直居中的五大方法及優缺點
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved