一、圆角解决方案汇总
1．纯css圆角（参见 ）
（1）用很多1像素高的div容器，利用背景色和边框色来模拟出圆角框的轮廓线；
（2）利用•字符的特性
2．图片圆角
一图片\两图片\三图片\四图片\一图片
3．使用浏览器私有圆角属性如：
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
4．Browser Drawing
IE下使用vml；firefox,safira,chrome浏览器使用canvas
二、相关知识: Browser Drawing
1. Canvas
canvas(https://developer.mozilla.org/cn/Canvas_tutorial). <canvas>是一个新的HTML元素，这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。 (可参阅Mozila官方文档)
<canvas id="tutorial" width="150" height="150"></canvas>
<canvas> 初始化是空白的，要在上面用脚本画图首先需要其渲染上下文（rendering context），它可以通过 canvas 元素对象的 getContext 方法来获取，同时得到的还有一些画图用的函数。getContext() 接受一个用于描述其类型的值作为参数。
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
<script type="application/x-javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150">
</canvas>
2. Vml（Vector Markup Language）
Vml(http://www.itlearner.com/code/vml/index.html) 是The Vector Markup Language(矢量可标记语言)的缩写。VML用于将图形数据矢量化的标记语言。这是一种基于 XML 语法的语言，由 AutoDesk 、 Macromedia 和 Microsoft 和 HP 公司向 W3C提出的方案。(可参阅百科此条”VML”)
请参阅vml教程Vml(http://www.itlearner.com/code/vml/index.html)
3. Canvas in IE（使用VML模拟）
在IE里面使用canvas的js插件
excanvas_r3(http://code.google.com/p/explorercanvas/ )
Canvas in IE(http://me.eae.net/archive/2005/12/29/canvas-in-ie/ )
4. SVG（SVG(Scalable Vector Graphics）
W3C标准，Firefox, Opera 支持，在IE下需要插件（Adobe SVG Viewer）。实现同样的功能，svg和canvas的对比：
var rect = document.createElementNS(SVG_NS, "rect");
rect.setAttribute("x", "5");
rect.setAttribute("y", "5");
rect.setAttribute("width", "20");
rect.setAttribute("height", "20");
rect.setAttribute("fill", "red");
parent.appendChild(rect);
Canvas
with (ctx)
{
fillStyle = "red";
fillRect(5, 5, 20, 20);
}
三、成熟的javascript frame圆角方案
* Corners大全 http://www.open-open.com/ajax/Corners.htm
* js DD_roundies
* js 为图片增加corner ---- cvi_corners_lib
* js 圆角框curvycorners-2.0.3
* js 圆角框用vml和Canvas结合起来的
四、最优圆角方案
首先对js圆角代码进行封装（可以借助上面提到的成熟的Js corner框架）
最佳div圆角调用方式:()
.corner{
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
<div class=“box corner”></div>
最佳图片园角调用方式:
<img src=“” class=“img-corner” />