CSS圖片浮雕是一種常見的效果,可以令圖片在頁面上看起來更加立體、有質感。下面介紹一些實現這種效果的方法。
img { border: 1px solid #ccc; box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); }
上面的代碼是最簡單的圖片浮雕效果實現方法。給圖片設置一個邊框,再使用CSS的box-shadow屬性添加一個模糊的陰影即可。當然,這種方法的效果并不是很明顯。
img { border: none; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 0, 0, 0.5) inset; }
上面的代碼使用了兩個box-shadow屬性來實現浮雕效果。其中,第一個是正常的陰影,第二個使用inset關鍵字來讓陰影鑲嵌在圖片內部。可以通過調整兩個陰影的距離和模糊程度來改變效果。
img { filter: grayscale(100%) contrast(1.2) brightness(0.9) sepia(0.2); mix-blend-mode: overlay; }
上面的代碼使用CSS的filter屬性來實現更加完善的浮雕效果。通過將圖片轉換為灰度圖,并使用對比度、亮度、色相等屬性調整色彩,再使用mix-blend-mode屬性讓圖片和背景混合,即可得到更加真實的浮雕效果。
以上就是幾種常見的CSS圖片浮雕效果實現方法,可以根據具體需要選用。當然,還有更加復雜的實現方法,需要借助JavaScript等技術。但是,以上這些方法已經足夠應對大多數情況了。
上一篇css圖片漸變效果怎么做
下一篇css圖片浮現在上層