box-shadow参数顺序和单位必须正确：前两值须带单位（如2px），blur-radius不能为负，spread-radius可正可负；多层阴影用逗号分隔；需避免父容器overflow:hidden裁剪阴影；悬停浮起需协同垂直偏移、负spread-radius和透明度，并加transition。
box-shadow 参数顺序和单位不能错
写 box-shadow 时，前两个值（水平偏移、垂直偏移）必须带单位，比如 2px，不能只写 2；漏单位整条声明会被浏览器忽略。常见错误是复制粘贴时删掉了 px，结果阴影完全不出现。
垂直偏移为正（如 4px）→ 阴影在元素下方；为负（如 -2px）→ 阴影在上方。别靠猜，用 DevTools 实时改数值看方向。
-
blur-radius不能为负，设成负数整条box-shadow失效 -
spread-radius可正可负：正值让阴影向外扩张，负值（如-2px）能收紧边缘，让圆角卡片阴影更贴合轮廓 - 多层阴影用逗号分隔，例如：
box-shadow: 0 -2px 0 2px #fff, 0 3px 6px rgba(0,0,0,0.15)
border-radius 和 box-shadow 必须协同，否则阴影被裁
圆角和阴影要一起生效，前提是阴影不被父容器“砍掉”。最常踩的坑是：卡片加了 border-radius: 12px 和 box-shadow，但它的直接父容器写了 overflow: hidden —— 阴影属于溢出内容，会被直接裁掉。
- 检查卡片的**直接父级**是否含
overflow: hidden或overflow: auto，有就删或改成visible - 卡片本身用了
position: relative？确保z-index足够高，否则悬停时阴影可能被隔壁卡片盖住 - 避免在卡片上滥用
transform（如scale或rotate），它会创建新层叠上下文，干扰阴影渲染边界
:hover 浮起效果不是加大模糊值就行
单纯把 box-shadow: 0 2px 6px rgba(0,0,0,0.1) 改成 0 0 24px rgba(0,0,0,0.2)，看起来像“炸开”，不是浮起。真实抬升感靠三者协同：垂直偏移加大、扩散收束（负 spread-radius）、透明度微增。
- 推荐起始值：
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.1) - 悬停目标值：
box-shadow: 0 4px 12px -2px rgba(0,0,0,0.15)（注意-2px收束） - 必须加过渡：
transition: box-shadow 0.2s ease，不能只写all - 想强化抬升感，同步加
transform: translateY(-2px)，比top: -2px性能更好
移动端 :active 按压反馈失效，不是 CSS 写错了
桌面预览正常，手机点不动，90% 是事件机制问题。iOS/Android 上 :active 在真机上持续时间极短，数值稍大就感知不到，且只对可聚焦元素（如 ）有效。
- 优先用语义化
，别用- 若必须用
，加空属性ontouchstart=""激活 iOS Safari 的:active:active状态下，transform: translateY(2px)和box-shadow的垂直偏移（第二个值）必须同步增大，比如从0 2px 4px变成0 4px 8px，否则物理直觉错乱- 真机测试比 DevTools 模拟器可靠得多——模拟器里
:active常被拉长，掩盖实际响应缺陷阴影顺序和位移方向是最容易被忽略的细节：高光在前、投影在后，写反了按钮就“塌”了；
transform: translateY(2px)是向下，不是向上——这些不是语法问题，是物理建模问题。 - 若必须用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
