用CSS3实现带有阴影效果和颜色渐变的按钮

这里讲下如何利用css3里的两个新属性 box-shadow和transition来实现如下所示的带有阴影和颜色渐变效果的按钮(下面这个只是图片；本想直接在这个页面下嵌html的,,试了后发现有些css样式貌似不给用就只能放图片了...=_=)：

首先是box-shados语法,用于向框添加一个或多个阴影：

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必须。水平阴影的位置
v-shadow	必须。垂直阴影的位置
blur	可选。模糊距离
spread	可选。阴影尺寸
color	可选。阴影的颜色
insert	可选。将外部阴影改为内部阴影

下面是为按钮设置的位置为0px,1px 模糊距离为5px，颜色为深灰色的css样式

1 <style>
2         .show
3         {
4             box-shadow: 0px 1px 5px #4a4a4a;
5         }
6 </style>

然后是transition,通过四个属性来营造过渡效果：

transition: property duration timing-function delay;

值	描述
transition-property	规定设置过渡效果的css属性的名称
transition-duration	规定完成过渡效果需要多少秒或毫秒
transition-timing-function	规定速度效果的速度曲线
transition-delay	规定过渡效果何时开始


 下面是过渡时长为0.3s，过渡函数为ease-out的样式

1 <style>
2         .show
3         {
4             transition: .3s ease-out;
5         }
6 </style>




最后这是最开始时那个按钮效果的全部实现代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 
 7     <style>
 8 
 9         .show
10         {
11             border:none;
12             display:inline-block; /* 行内块 */
13             padding:6px 16px;
14             color:white;
15             background-color: #F88E8B;
16             text-align: center;
17             vertical-align: middle;
18             margin-left:50px;
19             transition: .3s ease-out;
20             cursor: pointer; /* 获得焦点时改变指针样式 */
21             box-shadow: 0px 1px 5px #4a4a4a;
22         }
23         p.show a:link,p.show a:visited
24         {
25             text-decoration: none;
26             color:white;
27         }
28         p.show:hover
29         {
30             text-decoration: none;
31             color:white;
32             background-color: #F45551;
33         }
34 
35     </style>
36 
37 </head>
38 <body>
39 
40 <div>
41     <p class="show">
42         <a href="#">点击这里</a>
43     </p>
44 </div>
45 
46 </body>
47 </html>