CSS設(shè)置下邊陰影是一種常見的效果，通過該效果能夠使頁面元素看起來更加立體、有層次感。下面就來介紹一下如何使用CSS設(shè)置下邊陰影。

.box {
width: 200px;
height: 200px;
border: 1px solid #ccc;
box-shadow: 0px 5px 5px #888888;
}

以上代碼中，我們首先創(chuàng)建了一個類名為.box的元素，它的寬度和高度均為200px，并且有一個1px的灰色邊框。接著，我們使用了box-shadow屬性來設(shè)置下邊陰影，該屬性接受四個值。第一個值是水平偏移量，這里我們將其設(shè)為0，表示陰影不偏離元素；第二個值是垂直偏移量，這里我們將其設(shè)為5px，表示陰影在Y軸方向下移5px；第三個值是陰影的模糊程度，這里我們將其設(shè)為5px，表示陰影的邊緣模糊5px；第四個值是陰影的顏色，這里我們將其設(shè)為#888888，表示陰影顏色為灰色。

除了上述方式，我們還可以通過偽元素來實現(xiàn)下邊陰影效果：

.box::after {
content: "";
display: block;
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
}

以上代碼中，我們創(chuàng)建了一個偽元素，在元素下方覆蓋一個高度為5px的矩形。通過background屬性和linear-gradient函數(shù)，我們將其背景設(shè)為從黑色到透明的漸變色，從而實現(xiàn)下邊陰影的效果。