运用比较纯的CSS打造很Web2.0的按钮

但那样会多写一丁点HTML。幸运的是CSS3支持圆角框，而且目前那些真正叫做的浏览器的浏览器也是支持圆角框的。只是写法稍微有点不同而已。如下:

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

明眼人一看就知道，上面那个是针对Firefox用的，下面是针对webkit内核的浏览器用的。效果图:

三、阴影效果

在平常切页面(psd->html)的过程中，我最不喜欢做的就是两件事：一件是切圆角框，另外一件是切阴影，第三件便是切带阴影的圆角框(我讨厌数数数不清的人)。

但是，自从看到下面的代码之后，哥笑了。

.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 -1px 1px rgba(0,0,0,0.8);
3  }
  

还是明眼人就知道，text-shadow就是给文字加阴影。

哦耶，最终效果图：

text-shadow的写法可以参考https://developer.mozilla.org/en/CSS/text-shadow。

最终的CSS

复制代码
.orange,.magenta,.blue,.green,.red {
display: inline-block;
width: 150px;
height: 36px;
line-height: 36px;
color: #ffffff;
text-decoration: none;
text-align: center;
font-family: “Courier New”, Courier, monospace;
font-weight: bold;
background: transparent url(images/light-overlay.png) repeat-x scroll 0 0;
margin: 5px;
border-bottom: 1px solid rgba(0,0,0,0.25);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.8);
}
.orange {
background-color: #FF5C00;
}
.orange:hover {
background-color: #D45500;
}
.blue {
background-color: #2DAEBF;