一個常見的使用box-shadow的最佳實踐案例是在網站的按鈕上添加陰影效果,以增加按鈕的立體感和視覺吸引力。例如,可以在按鈕的CSS樣式中添加以下代碼來為按鈕添加陰影效果:
.button { background-color: #3498db; /* 按鈕的背景顏色 / color: white; / 文字顏色 / padding: 10px 20px; / 按鈕內邊距 / border: none; / 去掉按鈕的邊框 / border-radius: 5px; / 圓角邊框 / box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); / 陰影效果 */ }
這段代碼會為按鈕添加一個淺灰色的陰影效果,使按鈕看起來更加突出和立體。這樣的陰影效果通常會讓按鈕在頁面上更加顯眼,吸引用戶點擊。