HTML5 css3 陰影效果

陰影效果曾讓 Web 設計師既愛又恨，現在，有了 CSS3，你不再需要 Photoshop，已經有網站在使用這個功能了，如 24 Ways website.

　　-webkit-box-shadow: 10px 10px 25px #ccc;

　　-moz-box-shadow: 10px 10px 25px #ccc;

　　box-shadow: 10px 10px 25px #ccc;

　　前兩個屬性設置陰影的 X / Y 位移，這里分別是 10px，第3個屬性定義陰影的虛化程度，最后一個設置陰影的顏色。文字陰影也可以這樣設置：

text-shadow: 2px 2px 5px #ccc;

　　支持的瀏覽器：Firefox 3.1, Safari, Chrome (只支持 Box 陰影) ，Opera (只支持文字陰影).前3個數字表示紅綠藍三色的值，最后一個值代表透明度，另外，我們還可以使用 opacity 實現透明度

 

border: 1px solid #696;padding: 60px 0;text-align: center; width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 0px 10px;
-moz-box-shadow: #666 0px 0px 10px;
box-shadow: #666 0px 0px 10px;background: #EEFF99;behavior: url(/PIE.htc);