CSS中的按鈕底部陰影，可以為網(wǎng)頁按鈕增加更美觀的效果。當(dāng)鼠標(biāo)懸停在按鈕上時(shí)，底部陰影還可以變化，增加交互體驗(yàn)。

button {
box-shadow: 0 5px 0 #555;
transition: box-shadow 0.3s;
}
button:hover {
box-shadow: 0 3px 0 #555;
}

在上面的代碼中，設(shè)置了button元素的底部陰影以及鼠標(biāo)懸停時(shí)的動(dòng)畫效果。box-shadow屬性包含5個(gè)值：x軸位移、y軸位移、陰影模糊半徑、陰影擴(kuò)散半徑、陰影顏色。我們設(shè)置了x軸位移為0、y軸位移為5px，陰影顏色為#555。然后，為button元素設(shè)置了過渡效果，在鼠標(biāo)懸停時(shí)，box-shadow值變?yōu)? 3px 0 #555，陰影高度變短，模擬按鈕被按下的效果。

使用CSS按鈕底部陰影，可以很好地增加網(wǎng)頁的美觀性和交互體驗(yàn)，同時(shí)還能借助CSS3的過渡效果，實(shí)現(xiàn)更豐富的動(dòng)畫效果。趕緊來試試吧！