陰影大約從CSS2就開始有了，但是隻有Safari一個瀏覽器支援它，到現在依然是這樣。陰影在CSS3中可以應用在邊框和文字上，就像圖片的陰影效果一樣。

一般可以分為box-shadow和text-shadow兩類。

CSS3的box-shadow和text-shadow可以寫做：box-shadow:Apx Bpx Cpx #xxx;
Apx = x軸
Bpx = y軸
Cpx = 投影長度
#XXX = 像通常一樣的顏色

瞭解了這些，我們就可以以下面的方法開始體驗了…

瀏覽器相容性：

在前面的介紹中，我們已經宣告，並不是所有的瀏覽器都支援CSS3.最好的支援CSS3陰影效果的瀏覽器是Safari，也就是說，我們現在只需要用刀-webkit字首。

box-shadow

#boxShadow{
    border: 5px solid #111;
    -moz-box-shadow: 5px 5px 7px #999;
    -webkit-box-shadow: 5px 5px 7px #999;
    box-shadow: 5px 5px 7px #999;
    -moz-border-bottom-right-radius: 15px;
    -webkit-border-bottom-right-radius: 15px;
    border-bottom-right-radius: 15px;
    padding: 15px 25px;
    height: inherit;
    width: 590px; 
}

這種效果同樣可以用於圖片…

瀏覽器支援

  • Firefox 4+
  • Google Chrome 3+
  • Internet Explorer 9+
  • Safari 3.2.1+

簡單文字陰影：

text-shadow

.textShadowSingle { 
    font-size: 3.2em; 
    color: #F5F5F5; 
    text-shadow: 3px 3px 7px #111; 
    text-align: center; 
}

瀏覽器支援

  • Firefox 4+
  • Google Chrome 3+
  • Internet Explorer 9+
  • Safari 3.2.1+

多重文字陰影

multi-text-shadow

.textShadowMultiple { 
    font-size: 3.2em; 
    color: #FFF; 
    text-shadow: 0px -11px 10px #C60, 0px -3px 9px #FF0; 
    text-align: center; 
    padding: 10px 0px 5px 0px; 
    background: #151515; 
}

瀏覽器支援

  • Firefox 4+
  • Google Chrome 3+
  • Internet Explorer 9+
  • Safari 3.2.1+

CSS3系列教程|前端觀察

特別宣告，本系列文章譯自：Zen Elements，非常感謝Alex的辛勤工作。
Special Staterment: this series posts were translate from Zen Elements, thanks Alex for his great work so much.