先上图，所谓有图有真相。

如果您觉得图片上这些按钮不够2.0，那没办法，请回避吧！

从图片中，我们可以看到，我们要解决如下几个问题：

1. 背景色渐变
2. 圆角框
3. 阴影效果

就目前而言，要实现如上的效果，我们可以通过使用PNG图片来实现，但熟悉的人都知道，要做出这样的效果来，还是需要花费很多的经力的。更何况还要画出这么多种配色（感谢一下辛苦的前台工程师们）。

接下来，就让我们看下使用CSS(主要是CSS3)怎么来做吧。

一、背景色渐变

我们首先来解决第一个问题，背景色渐变。CSS3是支持背景色渐变的。对于在Firefox 3.6里面使用背景色渐变，可以参考以下一下这个网址:点击下载呀！

四、结语

嗯，感谢CCTV、感谢KTV，感谢。。。唉呀，谁扔的臭鸡蛋！！！

说正经的，本人不是专业美工，更谈不上UI设计师。我只是一位码农，不管是写代码的的农民也好，还是天天除了写代码就玩农场的程序员也好，我就是这样的。之所以写这篇东西，也是因为看到了这个地方http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba，感觉很好玩，就连翻译带自己的理解加上周未休息的时间（农场里面菜还没熟，等得寂寞了），写下这个东西了。

谢谢观赏!
文件打包下载 http://xiazai.phpstudy.net/200912/yuanma/ButtonsByCSS3.rar