我也喜欢带点圆角的主题，而在模板设计中要实现圆角有着很多的方法。最简单的是CSS 3的方法，在网上搜索一下也很多介绍，但在旧的浏览器下不支持；还有就是利用js来实现，虽然我自己也喜欢用JQuery实现一些效果，却不知道为什么就是不喜欢把圆角的实现也交予它。我一直以来都是通过小图片来实现的，或者应该说是CSS SPRITES这种实现方法。
因为通过CSS SPRITES这个方法，圆角的图片都是整合到主题所带的背景图片中，所以我觉得它并不浪费，反正一个主题肯定就要带上背景图片的；我也在网上看到过很多说是CSS SPRITES的方法介绍，但我都没有认真看，或者它们所说的跟我一直以来实现的方法相同；尽管这样，我也写写我自己喜欢的圆角实现吧。
首先是在需要实现圆角的部分，添加一组DIV，分别代表左上，右上，左下，右下圆角的位置；而它们的放置位置是你需要实现圆角样式的那一个DIV。比如在我的主题中，紧接<body>的那一个DIV就是我要添加圆角的：
<div id="wrapper">
...
</div>
添加四角区块，并为它添加一个class："encadre"。
<div id="wrapper" class="encadre">
<div class="tl"></div>
<div class="tr"></div>
<div class="bl"></div>
<div class="br"></div>
...
</div>
然后在主题的样式文件中添加下面的代码：
#wrapper .tl{background:url(imgs/allbgs.png) no-repeat -582px 0;}
#wrapper .tr{background:url(imgs/allbgs.png) no-repeat -591px 0px;}
#wrapper .bl{background:url(imgs/allbgs.png) no-repeat -582px -9px;}
#wrapper .br{background:url(imgs/allbgs.png) no-repeat -591px -9px;}
.encadre{margin:0;padding:0;position:relative;}
.encadre .tl,.encadre .tr,.encadre .bl,.encadre .br{font-size:0px;height:9px;line-height:1px;overflow:hidden;position:absolute;width:9px;}
.encadre .tl{background-position:left top;left:0;top:0;}
.encadre .tr{background-position:right top;right:0;top:0;}
.encadre .br{background-position:right top;bottom:0;right:0;}
.encadre .bl{background-position:left top;bottom:0;left:0;}
大家从上面红字的height和width数值知道，我要实现的圆角半径是9个px。
接下来要做的是画一下圆角的图片了，利用photoshop，在主题原有的背景图片中（假设你和我一样只使用一张背景图片）或者新建一个背景图片，名字叫：allbgs.png。
在allbgs.png中画上一个半径是9px的圆。这里的圆颜色是你添加圆角所在区域的颜色，如我的模板是白色的，所以圆就是白色；圆外的颜色是你的body或者是你添加圆角区域的外围颜色，如我的背景颜色是#f7f7f7，所以圆外颜色就是#f7f7f7。
最后就是修改一个样式中圆角图片的所在位置，我们需要的是找出四个顶点的位置，并把它们在上面样式代码中表现出来。这一步不难，大家对比一下上面的代码中的数字和下图的关系就知道怎样做了。
我自己比较喜欢这个方法，基本上实现不难；而且在各个浏览器下都不会出现显示的问题。另外因为它本来就附在需要加载的背景图片中，所以也不会产生说什么图片加载太多速度变慢的情况，本来这个小圆角的图片体积就小得可以不计较了，不是吗？
