p標簽：CSS 屬性 box-shadow
pre標簽：

.box {
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}
<br>
.box:hover {
box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.8);
}

box-shadow 是 CSS 中一個常用的屬性，用于設置元素陰影效果。通過控制參數值，可以實現不同的陰影效果。下面是一個使用 box-shadow 實現的陰影樣式：

.box {
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

上面的代碼設置了一個寬度為 2 像素，高度為 2 像素，模糊半徑為 10 像素，顏色為黑色的陰影效果。我們可以通過調整參數值來改變陰影效果。
box-shadow 也支持 hover 狀態下的樣式設置，可以為元素添加動態效果。下面是一個 hover 狀態下的陰影效果樣式：

.box:hover {
box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.8);
}

上面的代碼設置了一個寬度為 4 像素，高度為 4 像素，模糊半徑為 20 像素，顏色為黑色的動態陰影效果。當鼠標懸停在元素上時，陰影效果會發生變化。
總結一下，box-shadow 是一個十分有用的 CSS 屬性，可以幫助我們實現各種陰影效果。通過調整參數值，我們可以實現不同的陰影效果。同時，box-shadow 也支持 hover 狀態下的樣式設置，為網頁添加更多的動態效果。