首頁>網頁設計教程>網頁特效

CSS3屬性box-shadow使用教學課程

作者：Eve Cole 更新時間：2010-05-14 17:29:27

CSS3的box-shadow屬性可以讓我們輕鬆實現圖層陰影效果。我們來實戰詳解一下這個屬性。

1. box-shadow屬性的瀏覽器相容性

先來看一個這個屬性的瀏覽器相容性:

  • Opera: 不知道是從哪個版本開始支援的，我在發這篇文章測試的時候，正好更新了Opera到最新的10.53版本，已經支援box-shadow屬性。
  • firefox透過私有屬性-moz-box-shadow支援。
  • Safari和Chrome透過私有屬性-webkit-box-shadow支援。
  • 所有IE不支持(不知道IE9是否有改善)。別急，我們將在文章最後會介紹一些針對IE的Hack。

2. box-shadow屬性的語法

box-shadow有六個可設值:

img{box-shadow:陰影類型X軸位移Y軸位移陰影大小陰影擴展陰影顏色}

  • 不設陰影類型時，預設為投影效果。當設為inset時，為內陰影效果。
  • X軸和Y軸位移不等同但類似photoshop裡面的”角度”和”位置。
  • 陰影大小、擴充、顏色和Photoshop裡面的都同理。

    3. 實例解析

    讓我們透過幾個實例來看一個box-shadow的效果，先弄個簡單的html來測試：

    <html>
    <head>
    <style type="text/css">CSS部份寫在這裡</style>
    </head>
    <body>
    <img src="test.jpg" />
    </body>
    </html>

    請注意:為了省事兒，下面的CSS程式碼中只寫了box-shadow ，在實際使用中，你應該把-moz-box-shadow和-webkit-shadow也寫上。你需要做的很簡，複製兩個box-shadow,在它們前面分別加上-moz-和-webkit-。

    img {
    -moz-box-shadow:2px 2px 10px #06C;
    -webkit-box-shadow:2px 2px 10px #06C;
    box-shadow:2px 2px 10px #06C;
    }
相關文章