CSS給圖片添加陰影效果

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

下面是一個(gè)簡(jiǎn)單的例子，展示如何給圖片添加陰影效果：

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

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

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

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

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

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

CSS給我們提供了強(qiáng)大的樣式控制能力，我們可以利用box-shadow屬性給圖片添加各種陰影效果，從而豐富網(wǎng)頁(yè)的視覺表現(xiàn)。