应用较为纯的CSS打造很Web2.0的按钮

先上图，所谓有图有实情。

假如您感觉照片上这些按钮不足2.0，那没法，请逃避吧！

从照片中，大家能够看到，大家要处理以下几个难题：

1. 情况色渐变色
2. 圆角框
3. 黑影实际效果

就现阶段而言，要完成如上的实际效果，大家能够根据应用PNG照片来完成，但熟习的人都了解，要做出这样的实际效果来，還是必须花销许多的经力的。何况还要画出这么多种多样配色（谢谢1下艰辛的前台接待工程项目师们）。

接下来，就让大家看下应用CSS(关键是CSS3)如何来做吧。

1、情况色渐变色

大家最先来处理第1个难题，情况色渐变色。CSS3是适用情况色渐变色的。针对在Firefox 3.6里边应用情况色渐变色，能够参照下列1下这个网站地址:http://css-tricks.com/forums/viewtopic.php?f=8&t=3998，而WebKit模块的能够参照这个：http://webkit.org/blog/175/introducing-css-gradients/。但在此处，我还将用较为传统式的方法来完成。常常，大家会画1些渐变色的照片来做情况，如图：

随后大家可使用css设定background-image来完成渐变色，而针对悬停(hover)，则可根据设定background-position来完成。但这样大家会发现，但必须很多的配色时，要画出这1张张的照片来，還是1件较为耗精力的事（即使你的Photoshop里边存了1大堆这样的款式）。

细心1想,实际上这类渐变色色调基调常常全是1致的,并且常常是从较亮的色调变到次亮点的色调(我坚信不容易有人会要1个蓝变到红的按钮)。那末，大家想，既然是从亮变到暗，并且色调基调1致，这不就和大家日常生活中把光从顶部往下照到1块单色的布上的实际效果是1样的嘛。那末，怎样仿真模拟这类实际效果呢？很简易，画1张从白色到全透明渐变色的图往1个单色的地区上1罩不就OK啦。PhotoShop中的渐变色图：

CSS以下:

.orange{
    background: #FF5C00 url(images/light-overlay.png) repeat-x scroll 0 0;
}
.orange:hover {
    background-color: #D45500;
}

这样呢，大家就以1种相对性较为简易的方法处理了可以考虑大多数数场所要求的情况色渐变色实际效果。实际效果图以下：

2、圆角框

接下来，大家看看圆角框。依照大家如今的习惯性，圆角框1般全是根据照片来完成。自然也是有根据纯CSS(2.0)完成的，园区里有人详细介绍过。

但那样会多写1丁点HTML。好运的是CSS3适用圆角框，并且现阶段那些真实叫做的访问器的访问器也是适用圆角框的。只是写法略微有点不一样罢了。以下:

.orange{
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

明眼人1看就了解，上面那个是对于Firefox用的，下面是对于webkit核心的访问器用的。实际效果图:

3、黑影实际效果

在平时切网页页面(psd->html)的全过程中，我最不喜爱做的便是两件事：1件是切圆角框，此外1件是切黑影，第3件就是切带黑影的圆角框(我反感数数数不清的人)。

可是，自从看到下面的编码以后，哥笑了。

.orange {
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

先看实际效果图：

这里边，必须非常指出的是，在CSS3里边，大家能够用RGBA方式选择色调。所谓RGBA便是在原先的RGB中加了个A（空话）。这个A便是指Alpha，即全透明度。合起来，大家就叫RGBA。随后写css时便可以选用rgba(0,0,0,0.5)这样的写法了。

针对-moz-box-shadow的写法能够参照https://developer.mozilla.org/En/CSS/-moz-box-shadow，

嗯，黑影有了，写法这般简易。甚么？文本不足2.0？好吧，再次加码：

1 .orange {
2     text-shadow: 0 ⑴px 1px rgba(0,0,0,0.8);
3  }
  

還是明眼人就了解，text-shadow便是给文本加黑影。

哦耶，最后实际效果图：

text-shadow的写法能够参照https://developer.mozilla.org/en/CSS/text-shadow。

最后的CSS编码以下:

4、结语

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

说正儿八经的，自己并不是技术专业美工，更谈不上UI设计方案师。我只是1位码农，无论是写编码的的农户也好，還是每天除写编码就玩大农场的程序流程员也好，我便是这样的。之因此写这篇物品，也是由于看到了这个地区http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba，觉得很好玩，就连汉语翻译带自身的了解再加周未歇息的時间（大农场里边菜还没熟，等得孤单了），写下这个物品了。

感谢观赏!
文档装包免费下载 http://xiazai.jb51.net/200912/yuanma/ButtonsByCSS3.rar