首頁 > web前端 > css教學 > css:box-shadow的透明度如何設定?

css:box-shadow的透明度如何設定?

黄舟
發布: 2017-07-21 14:16:41
原創
6782 人瀏覽過

今天發現使用box-shadow屬性,可以很好的給p添加陰影效果,但是添加的效果如果是:

-moz-box-shadow:0 4px 4px #999; 
-webkit-box-shadow:0 4px 4px #999; 
box-shadow:0 4px 4px #999;
登入後複製

使用#設置的顏色是沒有透明效果的。這樣設定陰影的顏色,如果陰影落在的位置不是白色的,甚至是動態的,例如落在了投影片上,好幾張不同顏色的圖片輪播。那麼這樣設定陰影的顏色,會是陰影效果看起來很假!

解決方法:使用rgba來代替。

-moz-box-shadow:0 4px 4px rgba(0, 0, 0, 0.4); 
-webkit-box-shadow:0 4px 4px rgba(0, 0, 0, 0.4); 
box-shadow:0 4px 4px rgba(0, 0, 0, 0.4);
登入後複製

這裡要交代一下:

ie6和ie7應該是不支援box-shadow屬性的。

可以使用:*filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#888888"); 來代替

由於我設定的陰影並不要求一定要在所有瀏覽器中顯示。所以我沒有加入這行程式碼,所以也沒有驗證在這裡將Color="#888888"中的顏色用rgba來代替是否可行,有需要的朋友自己驗證去,估計夠嗆!

我的原則:

只要不是佈局錯位等問題,我是不會做相容性修改的。

為了少部分不升級瀏覽器的頑固派,沒有必要增加一行冗餘程式碼,既然用的舊版瀏覽器,那看到的效果不夠漂亮是肯定的。

之所以好多舊版ie瀏覽器到現在還存在,都是前端慣的!

以上是css:box-shadow的透明度如何設定?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板