HTML div圓角製作 （來自Joomla圓角實現方法）

使用(X)HTML 和CSS通過div添加border-radius來設定圓角，但若是要添加特殊的圓角，或在某些老版伺服器上，該方法都顯得無能為力。

下面介紹一種JOOMLA的圓角實現方法：

為了突破CSS邊框的限制，我們可以使用一張或多張圖片來實現邊框樣式看起來是那樣），對於確定大小的div邊框，很容易建立大小合適的div邊框圖片，但通常，我們的div往往是根據自己的內容來改變他們的邊界，尤其是對於模版來說。

理論：

為解決上述問題，我們用分離的圖片來做邊界的4個角，為了確保邊界始終是連續的，這些圖片必須足夠的大以能夠覆蓋容器div的最大尺寸，我們將圖片放在4個圖層裡，重疊在一起，來保證我們的邊界框在這個最大尺寸之內。

650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/15213061I-0.gif" />

首先，一張包含頂部，左側和左上方邊框的圖片被放在我們<div>的左上方，這張圖片尺寸大於所需容器的尺寸，甚至超出底部和右側邊緣，這個過程如動畫中半透明所示，在實踐中不可見。

接下來，一個包含底部邊緣和少部分左側邊緣角的圖片放置在左下角，上面圖片的上一層中，這張圖片在深粉色的細邊緣中呈現，可以看到，這張圖片超出了右側邊界。

第三條，一個包含右側邊界和右上方邊緣的圖片放置在右上方，置於第二個圖片上面。

最後，一個包含右下角的圖片放在容器的右下角。

切割的四個圖片

650) this.width=650;" alt="Rounded corners top left.png" src="http://www.bkjia.com/uploads/allimg/131228/1521305948-1.png" width="785" height="585" style="border:none;vertical-align:middle;" />	650) this.width=650;" alt="Rounded corners top right.png" src="http://www.bkjia.com/uploads/allimg/131228/1521303194-2.png" width="15" height="585" style="border:none;vertical-align:middle;" />
650) this.width=650;" alt="Rounded corners bottom left.png" src="http://www.bkjia.com/uploads/allimg/131228/1521306342-3.png" width="785" height="15" style="border:none;vertical-align:middle;" />	650) this.width=650;" alt="Rounded corners bottom right.png" src="http://www.bkjia.com/uploads/allimg/131228/15213055V-4.png" width="15" height="15" style="border:none;vertical-align:middle;" />

Joomla中的例子

<div  class="module_menu">

 <div>

    <div>

       <div><h3>Main Menu</h3><ul   class="menu"><li><!-- various menu items --></li></ul>

       </div>

   </div>

 </div>

</div>

樣式為

div.module_menu{background:url(../images/rounded_topleft.png)00no-repeat;padding:0;}div.module_menu div {background:url(../images/rounded_bottomleft.png)0100%no-repeat;margin:0;border:0;}div.module_menu div div{background:url(../images/rounded_topright.png)100%0no-repeat;}div.module_menu div div div {background:url(../images/rounded_bottomright.png)100%100%no-repeat;
div.module_menu div div div div{background:none;}

本文出自 “沒什麼的” 部落格，請務必保留此出處http://qiyuejingshen.blog.51cto.com/2769317/1293729