CSS按鈕下部顯示陰影

button {
color: white;
background-color: #4CAF50;
border: none;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
position: relative; /*設置為相對定位*/
}
button:after {
content: ""; /*after加上一個空內(nèi)容的偽元素*/
display: block;
position: absolute; /*設置為絕對定位*/
z-index: -1; /*將偽元素置于按鈕下方*/
bottom: -5px; /*設置距離按鈕底部的邊距*/
left: 0px;
width: 100%; /*偽元素寬度和按鈕寬度一致*/
height: 10px; /*偽元素高度*/
border-radius: 50% / 10px; /*設置圓形邊緣半徑*/
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2); /*設置陰影*/
}

使用上述CSS代碼，即可實現(xiàn)按鈕下方顯示陰影的效果。