CSS實現圖片的陰影是一種常見的設計技巧,它可以讓網頁中的圖片看起來更加立體、生動。接下來我們來介紹兩種實現陰影的方法。
第一種方法是使用box-shadow屬性,box-shadow可以設置元素的陰影效果。其使用方法如下:
img { box-shadow: 2px 2px 5px #888888; }
其中2px和2px表示陰影在x軸和y軸上的偏移量,5px表示陰影的模糊程度,#888888表示陰影的顏色。
第二種方法是使用filter屬性中的drop-shadow函數,drop-shadow可以設置元素的陰影效果。其使用方法如下:
img { filter: drop-shadow(2px 2px 5px #888888); }
其中2px和2px表示陰影在x軸和y軸上的偏移量,5px表示陰影的模糊程度,#888888表示陰影的顏色。
兩種方法實現的效果是一樣的,只是使用的屬性和函數不同。在實際應用中,可以根據自己的喜好和需求來選擇使用哪種方法。
上一篇div 偶數行
下一篇css實現圖片響應式