CSS是網站設計中不可或缺的一部分，其中陰影在網站設計中也是非常重要的一部分。CSS的陰影有幾種呢？

.box {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

1. box-shadow

.box {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

box-shadow是CSS3新增的樣式，可以讓元素添加陰影效果。box-shadow的參數分別對應著x軸偏移、y軸偏移、陰影模糊半徑和陰影顏色。其中x軸和y軸偏移值表示陰影的位置，陰影模糊半徑表示陰影的模糊程度，陰影顏色表示陰影的顏色。通過調整這些參數可以實現不同的陰影效果。

2. text-shadow

h1 {
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}

text-shadow可以用來給文本添加陰影效果。它的參數也是x軸偏移、y軸偏移、陰影模糊半徑和陰影顏色。通過調整這些參數可以實現不同的文本陰影效果。

3. drop-shadow()

img {
filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3));
}

drop-shadow()是CSS的濾鏡效果，可以用來實現圖片的陰影效果。和box-shadow類似，它的參數也是x軸偏移、y軸偏移、陰影模糊半徑和陰影顏色。通過調整這些參數可以實現不同的圖片陰影效果。