直接用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。阴影属于盒模型外部渲染，会被这类属性硬裁。

• 检查卡片的上一级
  是否含 overflow: hidden —— 有就删或改 visible
• 若必须保留裁剪（比如轮播图容器），给卡片加足够 padding 或用 margin 留白，避免阴影被切
• 慎用 transform（如 translateZ(0)）在父级，它会创建新层叠上下文并干扰阴影边界

深色背景/浅色背景下的阴影颜色适配

同一段 box-shadow: 0 4px 12px rgba(0,0,0,0.15) 在白色背景上自然，在深灰或黑色背景上会发灰、发虚，甚至看不见。


使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
下载
• 浅色背景推荐：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 偏移，且对透明区域也投，容易糊边

:hover 悬停抬升动效怎么做才不炸开

很多商品卡片悬停时阴影突然变大变黑，像“爆炸”而不是“浮起”。问题出在只调模糊值，没协调偏移、扩散和透明度。

• 起始态建议：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 更高性能

最易被忽略的是：阴影是否随圆角自然过渡，取决于卡片自身是否设置了 border-radius，且父容器未强制裁剪。只要这两点稳住，再调好参数配比，商品详情页的立体感就立住了——不需要 JS，也不依赖任何框架。