網頁設計

關於網頁設計的技術或相關資訊分享

CSS3 區塊陰影 Box-Shadow

box-shadow


  之前和大家介紹了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 沒有位移,因此四邊都有陰影

.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 有位移,陰影往右下角

.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 內陰影

.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 單邊陰影

.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 點一點,勾一勾,再複製就可以使用了。

Please enable the javascript to submit this form