前几天同学 博译论 提到了圆角的制作方法，所以我来做个总结。其实网页圆角的实现方法数不胜数，比如按类别分为：有图片圆角，无图片圆角。有图片圆角又分为单图片，多图片，边缘清晰，柔和圆角；无图片可以分为CSS实现圆角，JS实现圆角，浏览器圆角。而且圆角制作还可以和一些常用的CSS技术结合实现如：滑动门，CSS sprite 。。晕了吧！哈哈

我们今天不讨论类别，就当下网页制作比较常用的几种逐个分析，大家根据自己的情况选择使用。

一 . 图片圆角

对于单图片等简单的圆角效果我们就不在这里列出来了。

1. 山顶角效果

1> 在PhotoShop中用铅笔工具画出如下的一个5*5像素的透明GIF图片(这是我放大后的)：

基本原理：白色像素部分可以遮盖背景颜色，透明区域则不影响从而达到如下效果：

2> xhtml代码：

<div>
    <div>
        <div>
            <div>
                <p>内容内容内容内容内容内容内内容内容内容</p>
            </div>
        </div>
    </div>
</div>

3> css代码：

.wrapper 	{  width:200px; padding:5px;
	         background:#ccc url(corner.gif) left top no-repeat;}
p 		{  padding:10px;}

这样第一个圆角就实现了，接来的工作基本一样：再做右上，左下，右下的三个透明GIF图片。然后分别设置为box,outer,inner元素的背景。

源代码下载

2. 淘宝圆角框的制作方法

上面例子中会用到四张图片，在淘宝圆角框中只对它做了改进而且只需要一张图片就能实现效果。我大概说一下主要思想，如果想彻底了解可以去 青色同学的博客，里面有详细的讲解包你一看就懂。

1> 制作一张10*10像素如下图的圆：

—>这张图片将被用CSS图像定位技术平均分成四份放置在四个角上来实现圆角效果。

2> 核心代码如下：

<div> <!--相对定位的外部div-->
<!--四个.inner为长宽5px的绝对定位盒子，分别在.outer的四个角-->

	<!--利用CSS图片定位技术将图片定位到inner div中 -->
		<div></div>
   	<div></div>
   	<div></div>
   	<div></div>
</div>

有图片的圆角制作方法都可以从以上这两种演变过来，最基本的要点就是 平铺你的圆角图片

二 . 无图片圆角

1.纯CSS制作圆角效果

这个技术也被大家讨论过多次了，先前我也写过 这样的一篇文章，如果还不了解此项技术的可以去看看。我在这儿就不多讲了。

2.JQuery实现圆角

1> 该方法除了引入JQuery的核心包外还必须引入一个JQuery插件”jquery.corner.js”

2> 用此包的”corner()”方法实现圆角，JQuery代码如下：

$(function(){
	$('.round').corner("round 10px");
	//.round为你要设置圆角的元选素择器,"round 10px"且直径为10px的圆角。
});

3.CSS 3圆角

新版本的CSS 3.0加入了元素的圆角属性：我们利用这个属性就可以方便的实现圆角效果了，不过有一点就是老浏览器是不支持CSS 3.0的规则的。必须在支持的浏览器里面才能正确显示。代码如下：

-moz-border-radius: 20px;     /*FireFox中的圆角属性*/
-webkit-border-radius: 20px;  /*webkit内核器中的圆角属性*/
border-radius: 20px;          /*FireFox中的圆角属性*/

详细信息看这里

ok!写完了，最后总结两点：

对于一般流量不大的网页而言都会用一张图片来实现圆角，简单而且效果好。当然如果你求精的话可以费点神用上面讲到的诸如山顶角等技术来实现圆角。

对于圆角的使用比较多的页面可以选择用JQuery的插件来实现，这样的话一来方便而且兼容性好。利用率高。所以说 没有最好的方法，只有最适合自己的 。