用css为html元素添加圆角效果

想了想，还是给页面添上圆角效果比较好看，效果如下：

整个橙色的框是一个li，填上了5px的圆角，另外里边的两个按钮（实际上是用div模拟成按钮的样子）也添上了3px的圆角。这样看起来舒服多了。

代码很简单：

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

把这两行添加到需要圆角的地方去吧。

 

关于代码：

这两行代码都是css3标准里新出来的。

第一行是为webkit内核的浏览器提供圆角显示，比如Chrome, Safari等等。

第二行是为firefox浏览器提供圆角显示。

 

当然了，这两行代码放到IE浏览器下会完全没效果。

怎么办呢，一种办法是用图片，当然这是最次的办法。

第二种办法是用特殊的方法，就是把圆点符号通过一些div来截取显示一部分，然后拼出来一个带圆角的大框。这样的方法网上有很多，如果想用的可以搜一搜。（虽说这是能保证效果最好的办法，但是。。。真的太费事了，用起来太纠结了。。。如果为了一个圆角效果搞得那么复杂，我宁肯不要。毕竟IE不支持标准的css3不是我们的问题）

第三种办法，下载一个.htc文件，然后用两行代码就能实现这个效果了。

原理：

下载一个压缩包，里面有一个微软的脚本文件（11KB）和一个用来测试服务器是否有正确的Content-Type的HTML文件： iecss3.rar；.htc文件是IE内核支持Web行为后用来描述此类行为的脚本文件。它们定义了一套方法和属性，程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去。Web 行为是非常伟大的因为它们允许程序员把自定义的功能“连接”到现有的元素和控件，而不是必须让用户下载二进制文件（例如ActiveX 控件）来完成这个功能。

下载完这个压缩包之后，解压，吧htc文件放到跟html文件相同的文件夹里。然后在需要圆角的地方添上：

border-radius: 5px;behavior: url(ie-css3.htc);

 

如此就可以了。但是。。。请看效果：

就是这样，我之前设置的颜色居然没了。。。至于说为什么，我不想深究，有兴趣的可以研究一下啦。

第三种方法是引用自：IEfans.net 请各位点击并顶贴。

 

 

好了关于圆角就写这么多了，添加完之后看着更舒服了，所以，有需要的朋友就应用上吧。