辣不死

一、vml技术实现圆角 （only for ie）

VML的全称是Vector Markup Language（矢量可标记语言）VML可以理解为是IE里面的画笔工具，可以通过它来实现你所想要画出的图形，而且结合脚本，可以让图形产生动态的效果。VML是微软1999年9月随 IE5.0 一起发布的，也就是说，在 IE5.0+ 里都支持。

在IE独行的时间，此方法为大多数网站做为圆角技术而使用。但随着越来越多非IE的浏览器出现，这个方法的兼容性使得它作古。

效果图：

此外还有一种另类的技术，就是把要显示的图片当背景，在上面遮盖一个带圆角边框的透明GIF图片。猫扑深喑此招，一直以为用它做为圆角美化。来看看它的代码

<div style=”background: transparent url(http://image1.mop.com/images/project9/2009-07-03/12465898975195676.jpg) no-repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;” class=”rightimg”><a target=”_blank” href=”http://ent.mop.com/star/3028346.shtml”><img src=”http://images.star.mop.com/images/imgborder152x77.gif”/></a></div>

我觉得它的缺点在于使得代码更多，表现和结构混乱。

三 HTML+css圆角  （可兼容  开发复杂）

HTML+CSS 圆角是我随便起的名字，用来区分下面的纯css圆角。此技术的原理就是用css写不少1像素的点描成圆角形的边框。

著名的http://www.deviantart.com/ 则使用的此技术。研究它的css发现，由于使用圆角的地方多，所以css里有一套公用的css圆角类。

有兴趣的可以打开css 查看。 http://st.deviantart.net/css/v6core.css?-18286094837

我认为此方法虽然解决了代替图片来做圆角的问题，减少了带宽和请求，但对开发人员来讲却是一种痛苦，本来html和css可以写得很优美的，却为了这一效果加上许多空元素，无语义的代码。

现在虽然有jquery或其它js库做出来的圆角插件，但我还是觉得是鸡肋，无疑它又多出了一个文件。

四  css圆角

border-radius这个CSS3属性支持圆角技术已不是新闻，目前Firefox,Chrome,Safari和其它支持web-kit的浏览器可以实现这个功能了。

著名皮肤制作人utom总结了圆角属性不同浏览器下的运用

-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

此时我又想喷一句：万恶的IE!!好像ie8也没有支持圆角。

我更喜欢用第四种方法，和wordpress一样，就让ie不显示圆角，这个是让用户去做选择事。偏执的的IE为什么要让所有人为它而买单？

汇总完毕！