box-shadow:length length length length color
length:陰影水平偏移值
length:陰影垂直偏移值
length:陰影模糊值
length:陰影邊框
color:陰影顏色
說明:設置塊陰影
box-shadow:3px 3px 6px 0px #666
效果如下圖:
box-shadow:-3px -3px 6px 0px #666
效果如下圖:
box-shadow:0px 0px 12px 0px #666
效果如下圖:
box-shadow: 0px 0px 10px 5px #666
效果如下圖:
先來看一個這個屬性的瀏覽器兼容性:
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供測試:
|
新聞熱點
疑難解答