陰影效果 box-shadow,text-shadow
這邊要介紹使用css來製作出陰影的效果。 首先先製作兩個div有寬高的區塊。 <div class="shadow"> 寬200px高50px區塊1 </div> <div class="shadow2"> 寬200px高50px區塊2 </div> 接著替它寫上陰影的css樣式。 div.shadow { -moz-box-shadow: 3px 3px 2px #999; /*firfox*/ -khtml-box-shadow: 3px 3px 2px #999; /*chrome及Safari*/ -webkit-box-shadow: 3px 3px 2px #999; /*chrome及Safari*/ box-shadow: 3px 3px 2px #999; /*chrome及firfox及opera*/ -moz-text-shadow: 3px 3px 2px #999; /*此寫法無效*/ -khtml-text-shadow: 3px 3px 2px #999; /*此寫法無效*/ -webkit-text-shadow: 3px 3px 2px #999; /*此寫法無效*/ text-shadow: 3px 3px 2px #999; /*chrome及firfox及opera及Safari*/ width:200px; height:50px; } div.shadow2 { -moz-box-shadow: 3px 3px 20px #999; -khtml-box-shadow: 3px 3px 20px #999; -webkit-box-shadow: 3px 3px 20px #999; box-shadow: 3px 3px 20px #999; text-shadow: 3px 3px 20px #999; width:200px; height:50px; } box-shadow:3px 3px 2px #999; 參數分別代表x偏移量、y偏移量、陰影模糊度、陰影顏色。 實際狀態可以參考範例。css-陰影效果範例 以下為各瀏覽器的支援程度。-moz-box-shadow 各瀏覽器支援狀態:
-khtml-box-shadow 及 -webkit-box-shadow 各瀏覽器支援狀態:
box-shadow 各瀏覽器支援狀態:
text-shadow 各瀏覽器支援狀態: