這里講下如何利用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>