在CSS2中,有很多種方式可以設置陰影效果,其中一種常用的就是內陰影。內陰影是在元素內部添加陰影效果,可以使元素看起來更加立體和生動。
.box { box-shadow: inset 5px 5px 10px #c0c0c0; }
上述代碼表示在.box元素內部添加一個寬度為5px、高度為5px、模糊距離為10px、顏色為#c0c0c0的內陰影。關鍵字inset表示添加內陰影,如果省略關鍵字,則為外陰影。另外,可以通過多次添加box-shadow屬性來設置多個陰影效果。
.box { box-shadow: inset 5px 5px 10px #c0c0c0, inset -5px -5px 10px #ffffff; }
上述代碼表示在.box元素內部添加兩個內陰影,一個顏色為#c0c0c0,另一個顏色為#ffffff。第一個內陰影向右下方偏移5px,在距離元素5px的位置開始呈現陰影效果;第二個內陰影則向左上方偏移5px,在距離元素5px的位置開始呈現陰影效果。
最后,需要注意的是,不是所有瀏覽器都支持box-shadow屬性。如果需要兼容一些舊瀏覽器,可以考慮使用另一種類似的屬性——filter:drop-shadow。
.box { filter: drop-shadow(5px 5px 10px #c0c0c0); }
上述代碼表示在.box元素周圍添加一個寬度為5px、高度為5px、模糊距離為10px、顏色為#c0c0c0的外陰影。與box-shadow不同的是,drop-shadow沒有inset關鍵字,只能添加外陰影。
下一篇css3 3d教程