DIV CSS 佈局教程網

• 第一章：基本的圓角框
• 第二章：透明圓角化背景圖片
• 第三章：圓角化圖片
• 第四章：CSS圓角框組件 V1.0

前序：本來前三篇文章已經將CSS圓角框講解完畢，但從網友反饋中，都說到不好使用，因此有了這篇文章，本文主要是將前面的結果總結修訂後進行JS封裝，方便調用。

在本次封裝中，增加了對真正img標簽引用的圖片實現圓角化，之前的圓角圖片大多是基於背景圖片的，因為純CSS無法實現img圖片的圓角，有了JS的加入，就變成可能了。並且在這次封裝過程中修正了上次的背景圖片下面兩個圓角圖片的定位錯誤問題。

其實這個控件的JS代碼很簡單，只需要用到innerHtml就可以完成其大部分工作，而真正的難點在於對於CSS樣式的合並組合使用。

先看看最終效果截圖：

圖一

在我的《CSS圓角框組件V1.0》中，可以變化出6種基本風格的圓角框（至於顏色風格，則可以說是千變萬化了）。它們分別是：

1. 純線框圓角。
2. 標題線框圓角。不帶背景色或背景圖片，透明。
3. 標題和內容區可分別自定義顏色圓角。
4. 標題背景圖片圓角。標題帶背景圖片時，自動實現圓角。
5. 裝飾性背景圖片圓角。容器有裝飾性背景圖片時，自動實現圓角。
6. Img圖片圓角。如果有img標簽引用圖片時，自動實現圓角。

7. js代碼就不用詳解了，都很簡單，我在JS中作了詳細的注釋說明，一看就會。下面說說這6種風格的調用方法：

   第一種：純線框圓角

   這是最基本，也是應用最廣泛的一種應用。只需一句話就可以了。

   JS行為：

   b_RoundCurve("bottom","#F8B3D0","#FFF5FA",1);//普通圓角框

   解釋：四個參數，分別代表樣式名稱、邊框色值、背景色值、風格參數。

   Html結構：

   <div class="bottom"></div>

   第二種：標題線框圓角

   一般這種塊狀布局，都需要在頁頭加入標題，你可以使用h1~h6系列標簽。

   JS行為：

   b_RoundCurve("right2","orange","",3,"h3");//標題和內容區都透明

   解釋：五個參數，分別代表樣式名稱、邊框色值、背景色值、風格參數、標題標簽名稱，因為考慮了擴展性，當想使用其它的標簽時，可以隨時替換，如h1~h6系列標簽。

   Html結構：

   <div class="right2">
      <h3>標題</h3>
      <div>內容</div>
   </div>

   第三種：標題和內容區可分別自定義顏色圓角

   與第二種風格差不多，差別在於可以分別定義標題和內容區的顏色值。

   JS行為：

   b_RoundCurve("right1","#863313","#84D4CA",3,"h3","#BAB556");//標題只用純色背景

   解釋：六個參數，分別代表樣式名稱、邊框色值、背景色值、風格參數、標題標簽名稱、標題背景色值。

   Html結構：

   <div class="right1">
     <h3>標題</h3>
     <div>內容</div>
   </div>

   第四種：標題背景圖片圓角

   這種需要將標題的背景圖片路徑作為參數傳入，有了背景圖片，一般都不需要背景顏色了，所以將第六個參數值設為空：

   JS行為：

   b_RoundCurve("right3","#A0C044","#E9F2CC",3,"h3","","image/bg1.gif");//標題用背景圖片

   解釋：七個參數，分別代表樣式名稱、邊框色值、背景色值、風格參數、標題標簽名稱、標題背景色值、標題背景圖片路徑。

   Html結構：

   <div class="right3">
     <h3>標題</h3>
     <div>內容</div>
   </div>

   第五種：裝飾性背景圖片圓角

   這種圓角也是用得比較多的，這種風格要注意：在CSS中需要設置容器的寬高值，因為在JS中會查找到這個圖片的寬高值。

   JS行為：

   b_RoundCurve("rightbgimg","#F38E1A","",4);//圓角背景圖片

   解釋：四個參數，分別代表樣式名稱、邊框色值、背景色值、風格參數。背景色值和背景圖片只選其一，所以將第三個參數置為空。

   Html結構：

   <div class=" rightbgimg "></div>

   第六種：Img圖片圓角

   純CSS方法是無法做到Img圖片圓角的，但有JS的加入，就可以變相實現。原理和第五種相似，只是將這個Img的圖片路徑取出來，在JS中以背景圖片的方式加入到各個容器中去，然後再還原img標簽。

   JS行為：

   b_RoundCurve("img","#999","#FFF5FA",2);//圓角IMG圖片

   解釋：四個參數，分別代表樣式名稱、邊框色值、背景色值、風格參數。

   Html結構：

   最簡潔的Html結構，無冗余代碼。

   <div class="img">
     <a href="http://binyong.cnblogs.com/" title="漂亮女孩1" target="_blank">
       <img src="image/girl-1.jpg" height="115" width="154" alt="漂亮女孩1"/>
     </a>
   </div>

   組件優點：

   1. 全面兼容所有浏覽器。
   2. 圓角不需要圖片，直接代碼生成，省去制圖的麻煩。
   3. 自適應外框的大小，可廣泛應用於布局區塊中。
   4. 封裝難以控制的CSS代碼，調用靈活方便。
   5. 封裝Html結構，你只需定義你想要的結構，無冗余，更語義化。

   組件缺點：

   1. 不能定義線框的大小。如果你需要改變線框大小，本組件不適合你。
   2. 圓角不夠圓滑，如果你對圓角圖片的精度要求較高，不宜采用本組件。
   3. 線框顏色和背景色不宜采用對比太強烈的顏色，容易看出鋸齒。

   本模型在以下浏覽器中完美通過：

   IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。