CSS有很多屬性可以讓我們為圖片添加陰影效果，比如：

box-shadow

、

text-shadow

、

filter: drop-shadow()

等等。今天我們來了解一下這些屬性的使用方法。

首先，我們來看box-shadow。這個屬性可以為元素添加盒子陰影，包括元素本身和元素周圍的空白區域。

.box {
box-shadow: 2px 2px 4px #999;
}

上面的代碼表示給一個類名為.box的元素添加了2px x 2px大小、顏色為#999的4px模糊盒子陰影。值得注意的是，如果給陰影設置了模糊值，那么陰影會變得更加自然，也更能體現立體感。

接下來，我們看一下text-shadow屬性，它可以為文本添加陰影。這個屬性的語法與box-shadow非常相似，因為它們都是為元素添加陰影效果。下面是一個例子：

.text {
text-shadow: 1px 1px 2px #999;
}

這個屬性與前面的box-shadow的區別在于，它只應用于文本內容，而不是整個元素。因此，如果你對一段段的文本使用text-shadow屬性，會使文本看起來更加立體，有一種浮在頁面上的感覺。

最后，我們來介紹一下filter: drop-shadow()。這個屬性可以為任何元素添加陰影效果，它的語法與box-shadow非常相似。下面是一個例子：

.img {
filter: drop-shadow(2px 2px 4px #999);
}

上面的代碼可以為一個圖片元素添加一個2px x 2px大小、顏色為#999的4px模糊陰影。與box-shadow的區別在于，它不會應用于元素周圍的空白區域，只是簡單的給元素添加陰影效果。

以上就是為圖片添加陰影效果的方法介紹，希望能對你有所幫助！