HTML div圆角制作 （来自Joomla圆角实现方法）

使用(X)HTML 和CSS通过div添加border-radius来设置圆角，但若是要添加特殊的圆角，或在某些老版服务器上，该方法都显得无能为力。

下面介绍一种JOOMLA的圆角实现方法：

为了突破CSS边框的限制，我们可以使用一张或多张图片来实现边框样式（看起来是那样），对于确定大小的div边框，很容易创建大小合适的div边框图片，但通常，我们的div往往是根据自己的内容来改变他们的边界，尤其是对于模版来说。

理论：

为解决上述问题，我们用分离的图片来做边界的4个角，为了确保边界始终是连续的，这些图片必须足够的大以能够覆盖容器div的最大尺寸，我们将图片放在4个图层里，重叠在一起，来保证我们的边界框在这个最大尺寸之内。

首先，一张包含顶部，左侧和左上角边框的图片被放在我们<div>的左上角，这张图片尺寸大于所需容器的尺寸，甚至超出底部和右侧边缘，这个过程如动画中半透明所示，在实践中不可见。

接下来，一个包含底部边缘和少部分左侧边缘角的图片放置在左下角，上面图片的上一层中，这张图片在深粉色的细边缘中呈现，可以看到，这张图片超出了右侧边界。

第三条，一个包含右侧边界和右上角边缘的图片放置在右上角，置于第二个图片上面。

最后，一个包含右下角的图片放在容器的右下角。

切割的四个图片如图所示

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;}