按钮悬停时通过 box-shadow 和 transition 实现阴影变化，先设置基础样式（如背景色、圆角、初始阴影），再用 :hover 伪类增强阴影（如 0 8px 15px），并添加 transition: box-shadow 0.3s ease 实现平滑过渡，推荐 duration 0.2s–0.3s 以平衡响应与自然感，可单独控制属性避免冗余过渡，提升交互质感。
按钮在悬停时产生阴影变化，是提升界面交互感的常用技巧。通过 box-shadow 和 transition 的配合，可以实现平滑自然的视觉过渡效果。
设置基础按钮样式
先定义按钮的基本外观，包括背景色、边框、圆角和内边距，确保初始状态下没有阴影或有轻微阴影。
.button {
padding: 12px 24px;
background-color: #007bff;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
/* 初始阴影（可选） */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
定义悬停状态的阴影增强
当用户将鼠标移到按钮上时，扩大阴影范围，模拟“浮起”效果。使用 :hover 伪类修改 box-shadow 值。
.button:hover {
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}
添加过渡动画 duration 控制速度
为了让阴影变化不显得突兀，加入 transition 属性，指定对 box-shadow 进行过渡，并设置持续时间（duration）。
立即学习“前端免费学习笔记（深入）”；
.button {
/* 其他样式保持不变 */
transition: box-shadow 0.3s ease;
}
</font>这里 0.3s 表示阴影变化耗时 300 毫秒，ease 是默认缓动函数，让动画开始慢、中间快、结束慢，更自然。
你也可以尝试不同的 duration 值：
- 0.1s：快速响应，适合轻量操作
- 0.5s：明显动画，强调交互反馈
- 0.2s：平衡选择，推荐常用值
优化体验的小技巧
为防止其他属性意外触发过渡，建议只针对 box-shadow 做过渡。如果按钮还有颜色变化，可单独列出：
.button {
transition: box-shadow 0.3s ease, background-color 0.2s ease;
}
这样控制更精细，避免整体使用 all 导致性能或视觉上的不协调。
基本上就这些。box-shadow 配合 transition duration，简单却有效，能让按钮更有“可点击”的质感。关键在于阴影参数合理、过渡时间适中，不夸张也不迟钝。
