直接用box-shadow+border-radius可实现立体卡片，但需避免漏单位、负blur、overflow:hidden裁剪阴影，并按深浅背景分别设置rgba色值，配合负spread和transition才能呈现自然悬浮感。
直接用 box-shadow + border-radius 就能做出商品详情页所需的立体卡片，但阴影“浮不起来”或“看起来假”，90% 是参数配比和容器限制导致的。
box-shadow 参数填错导致阴影不显示或突兀
常见错误是漏单位、顺序错、负模糊值——浏览器直接忽略整条声明。比如 box-shadow: 0 4 8 rgba(0,0,0,0.1) 会失效，因为 4 和 8 缺少 px；又比如写成 box-shadow: 0 0 -2px rgba(0,0,0,0.1)，负的模糊半径会让整条规则被丢弃。
- 必须写全单位：
0 4px 8px rgba(0,0,0,0.1) - 水平偏移为正 → 阴影在右；垂直偏移为正 → 阴影在下（别记反）
- 想让阴影更贴合卡片轮廓，可用负的
spread-radius，例如-2px - 商品图常需双层阴影模拟环境光+主投影，写法：
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.08), 0 6px 16px rgba(0,0,0,0.12)
父容器 overflow: hidden 裁掉阴影
商品卡片明明写了阴影，预览却只看到一半甚至完全没影子？八成是它的直接父容器加了 overflow: hidden 或 overflow: auto。阴影属于盒模型外部渲染，会被这类属性硬裁。
- 检查卡片的上一级
<div> 是否含 <code>overflow: hidden—— 有就删或改visible - 若必须保留裁剪（比如轮播图容器），给卡片加足够
padding或用margin留白，避免阴影被切 - 慎用
transform（如translateZ(0)）在父级，它会创建新层叠上下文并干扰阴影边界 - 浅色背景推荐：
rgba(0,0,0,0.08)～0.12) - 深色背景换浅色阴影：
rgba(255,255,255,0.05)～0.1)（注意不是纯白） - 配合
@media (prefers-color-scheme: dark)自动切换，避免手动维护两套样式 - 别用
filter: drop-shadow()替代——它无法控制 x/y 偏移，且对透明区域也投，容易糊边 - 起始态建议：
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.08) - 悬停态推荐：
box-shadow: 0 4px 12px -2px rgba(0,0,0,0.12)（注意-2px收束 + 垂直偏移加大） - 必须加过渡：
transition: box-shadow 0.2s ease，否则变化生硬 - 强化抬升感可加
transform: translateY(-2px)，比top: -2px更高性能
深色背景/浅色背景下的阴影颜色适配
同一段 box-shadow: 0 4px 12px rgba(0,0,0,0.15) 在白色背景上自然，在深灰或黑色背景上会发灰、发虚，甚至看不见。
立即学习“前端免费学习笔记（深入）”；
:hover 悬停抬升动效怎么做才不炸开
很多商品卡片悬停时阴影突然变大变黑，像“爆炸”而不是“浮起”。问题出在只调模糊值，没协调偏移、扩散和透明度。
最易被忽略的是：阴影是否随圆角自然过渡，取决于卡片自身是否设置了 border-radius，且父容器未强制裁剪。只要这两点稳住，再调好参数配比，商品详情页的立体感就立住了——不需要 JS，也不依赖任何框架。
