CSS給圖片添加陰影效果

在CSS中，我們可以使用box-shadow屬性給圖片添加陰影效果，這個屬性可以接收四個值，分別代表陰影的偏移量、模糊半徑、顏色以及陰影的樣式。

下面是一個簡單的例子，展示如何給圖片添加陰影效果：

img {
  box-shadow: 10px 10px 5px #000;
}

在這個例子中，10px 10px表示陰影的偏移量，即陰影距離圖片邊緣的水平距離和垂直距離。5px表示陰影的模糊半徑，即陰影的擴散范圍。#000表示陰影的顏色，這里我們使用了黑色。

除了上述例子，我們還可以調(diào)整陰影的其他屬性，比如樣式，CSS提供了幾種樣式供我們選擇，包括內(nèi)陰影（inset）、外陰影（outset）等，下面是一個使用內(nèi)陰影的例子：

img {
  box-shadow: 10px 10px 5px #000 inset;
}

在這個例子中，inset表示使用內(nèi)陰影樣式，這樣，陰影會在圖片內(nèi)部顯示，而不是外部。

需要注意的是，box-shadow屬性只在支持CSS3的瀏覽器中有效，在使用這個屬性時，我們需要確保目標(biāo)瀏覽器支持CSS3。

CSS給我們提供了強大的工具來添加圖片陰影效果，通過調(diào)整偏移量、模糊半徑、顏色和樣式等屬性，我們可以創(chuàng)建出各種有趣的陰影效果。