在CSS中,我們可以使用filter
屬性為圖片添加陰影效果,以下是一個(gè)簡(jiǎn)單的示例:
img { filter: drop-shadow(10px 10px 5px gray); }
在這個(gè)示例中,drop-shadow()
函數(shù)用于創(chuàng)建陰影效果,它接受三個(gè)參數(shù):水平偏移、垂直偏移和模糊半徑,在這個(gè)例子中,水平偏移和垂直偏移都是10像素,模糊半徑是5像素,陰影顏色是灰色。
如果你想改變陰影的顏色,可以通過添加mix-blend-mode
屬性來實(shí)現(xiàn):
img { filter: drop-shadow(10px 10px 5px gray); mix-blend-mode: multiply; }
在這個(gè)示例中,mix-blend-mode
屬性將陰影顏色與圖片顏色混合,創(chuàng)造出一種更自然的效果。
你還可以調(diào)整陰影的大小和位置,以及添加其他視覺效果,如光澤和模糊,這些都可以通過filter
屬性來實(shí)現(xiàn)。
filter
屬性在較舊的瀏覽器版本中可能不受支持,在使用它之前,請(qǐng)確保你的目標(biāo)受眾使用的瀏覽器版本支持該屬性。