本文目錄導(dǎo)讀：

1. 文本陰影效果
2. 盒子陰影效果
3. 使用CSS濾鏡實(shí)現(xiàn)更復(fù)雜的陰影效果

CSS實(shí)現(xiàn)元素陰影效果的方法

文本陰影效果

在CSS中，我們可以使用text-shadow屬性為文本添加陰影效果，這個(gè)屬性允許我們?cè)O(shè)置多個(gè)陰影，每個(gè)陰影可以有不同的顏色、模糊距離和陰影方向。

h1 {
    text-shadow: 2px 2px 4px #000000; /* 水平陰影，垂直陰影，模糊距離，顏色 */
}

元素添加一個(gè)黑色的陰影效果，你可以根據(jù)需要調(diào)整陰影的顏色、方向和模糊距離。

盒子陰影效果

對(duì)于盒子元素（如div、button等），我們可以使用box-shadow屬性來(lái)添加陰影效果，這個(gè)屬性同樣允許我們?cè)O(shè)置多個(gè)陰影，每個(gè)陰影可以有不同的顏色、模糊距離、陰影大小和陰影方向。

div {
    box-shadow: 5px 5px 10px #888888; /* 水平偏移，垂直偏移，模糊距離，顏色 */
}

這將給div元素添加一個(gè)灰色的陰影效果，你可以根據(jù)需要調(diào)整陰影的偏移、模糊距離和顏色，注意，偏移可以是負(fù)數(shù)，以實(shí)現(xiàn)陰影在元素內(nèi)部的效果。

使用CSS濾鏡實(shí)現(xiàn)更復(fù)雜的陰影效果

除了上述兩種基本方法外，我們還可以使用CSS濾鏡（filter）來(lái)實(shí)現(xiàn)更復(fù)雜的陰影效果，我們可以使用drop-shadow濾鏡為元素添加多重陰影效果：

button {
    filter: drop-shadow(5px 5px 5px #000000); /* 水平偏移，垂直偏移，模糊距離，顏色 */
}

這將給按鈕元素添加一個(gè)復(fù)雜的黑色陰影效果，你可以根據(jù)需要調(diào)整濾鏡的參數(shù)和顏色，以實(shí)現(xiàn)不同的陰影效果。

CSS提供了多種方法來(lái)實(shí)現(xiàn)元素的陰影效果，包括文本陰影和盒子陰影，以及使用CSS濾鏡實(shí)現(xiàn)更復(fù)雜的陰影效果，你可以根據(jù)需要選擇適合的方法來(lái)實(shí)現(xiàn)你的設(shè)計(jì)需求。