今天發現使用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中文網其他相關文章!