圆形绘制

根据 css3 中的 border-radius 属性，将 border-radius 的值设置为和元素的高宽一样，那么这个元素就渲染成了圆形。目前 ie9 以及各大标准浏览器都支持，但是用户份额最多的 ie6,7,8 并不支持，不过 ie6,7,8 支持微软提出的 vml 标准 ( wiki , msdn )，而从 ie9 开始放弃了 vml，转而支持 w3c 推荐的同类型的矢量语言 svg 。

demo :

 

那么对于 ie6,7,8 就可以使用 vml 代替 css3 对应属性来绘制圆形：

demo : using vml to draw round

实现注意：

1.vml 支持从 ie6 到 ie8，越来越弱，问题越来越多，性能越来越差，特别是 ie8 在兼容性上和前两个版本有些区别 。

2.roundrect 的 arcsize 对应 css 的 border-radius 属性，不需要边框可设置 stroked（规范为stroke，规范与实现不符） 为 false ，但是当设置透明度时边框会有黑色线条残余（ ie9 的兼容模式已修复）。透明度要设置 vml 元素的style，而不是设置 opacity 属性（规范与实现不符）。

3.添加 vml 元素后注意 要 将容器元素的背景色设置为透明，防止干扰绘制的圆形区域。

4.容器元素要设置定位，并且绝对定位的 vml 元素的 z-index 要设置为 -1，使得 vml 元素位于容器其他子元素的下方，达到等同于设置元素背景色的效果。

 

update : 发现一个更复杂全面的库 DD_roundies

重属巧合~~

PS :  渲染延迟

最后一个添加到dom的 vml 元素总是会被延迟渲染，所以如果要求所有vml元素一起渲染显示的话，需要在最后一个vml元素后再次添加一个元素并设置为隐藏。