如何用CSS实现目标样式的按钮Box Shadow效果？

你的当前阴影是右上方向的小范围硬阴影，目标效果是底部扩散的柔和投影，可通过调整box-shadow的参数来实现：

修改后的CSS代码 #

.boton{
    width: 30%;
    height: 60px;
    border-radius: 8px;
    /* 底部柔和投影：水平偏移0，垂直偏移4px，模糊12px，半透明深灰 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

参数说明 #

• 0：水平偏移量，设置为0让阴影只在垂直方向扩散
• 4px：垂直偏移量，让阴影落在按钮下方，模拟真实光照效果
• 12px：模糊半径，增大数值让阴影更柔和自然
• rgba(0, 0, 0, 0.15)：用半透明黑色替代纯黑，避免阴影过于生硬，更贴近目标质感

如果想要更立体的层次阴影，还可以叠加多层阴影模拟真实光照层次：

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 6px 16px rgba(0, 0, 0, 0.1);

第一层是近距离的浅阴影，第二层是更远的扩散阴影，能营造出更真实的立体效果。

内容的提问来源于stack exchange，提问作者Adalid