之前和大家介紹了CSS3的下拉式選單，其中有使用到CSS3的box-shadow屬性，今天就來介紹一下這個屬性。
參數說明
我們先來看一下CSS該如何使用。
.shadow {
-moz-box-shadow: 3px 3px 3px 3px #669FEC;
-webkit-box-shadow: 3px 3px 3px 3px #669FEC;
box-shadow: 3px 3px 3px 3px #669FEC;
}
box-shadow:h-shadow v-shadow blur spread color inset;
整個box-shadow共有六個參數可以設定
- h-shadow：水平位移
- v-shadow：垂直位移
- blur：陰影大小
- spread：擴散尺寸
- color：顏色
- inset：內陰影
DEMO範例
DEMO1 沒有位移，因此四邊都有陰影
.demo1 {
-moz-box-shadow: 0px 0px 3px 3px #669FEC;
-webkit-box-shadow: 0px 0px 3px 3px #669FEC;
box-shadow: 0px 0px 3px 3px #669FEC;
}
DEMO2 有位移，陰影往右下角
.demo2 {
-moz-box-shadow: 3px 3px 3px 3px #669FEC;
-webkit-box-shadow: 3px 3px 3px 3px #669FEC;
box-shadow: 3px 3px 3px 3px #669FEC;
}
DEMO3 內陰影
.demo3 {
-moz-box-shadow: 0 0 5px 5px #669FEC inset ;
-webkit-box-shadow: 0 0 5px 5px #669FEC inset ;
box-shadow: 0 0 5px 5px #669FEC inset ;
}
DEMO4 單邊陰影
.demo4 {
-moz-box-shadow: 0 8px 6px -6px #669FEC ;
-webkit-box-shadow: 0 8px 6px -6px #669FEC ;
box-shadow: 0 8px 6px -6px #669FEC ;
}
瀏覽器相容性
目前各瀏覽器對box-shadow的相容性如下：
- IE：9以上支援
- Chrome：4.0以上支援
- Firefox：3.5以上支援
- Safari：3.0以上支援
- Opera：10.5以上支援
相關網站
如果覺得還要自己手動處理很麻煩的話，可以到以下網頁
CSS3 maker 點一點，勾一勾，再複製就可以使用了。