直接加box-shadow看不出浮动感，因缺少视觉纵深配合：真实浮动需悬停时同步增大y偏移、模糊半径、降低alpha值，并配transition和transform实现平滑上浮。
为什么直接加 box-shadow 看不出浮动感？
很多人一上来就写 box-shadow: 0 2px 8px rgba(0,0,0,0.1)，结果卡片平平无奇，像贴在页面上。问题不在阴影本身，而在缺少「视觉纵深」的配合：真实浮动必然伴随位移+模糊+透明度渐变，且需配合悬停时的动态变化。纯静态阴影只是“有影子”，不是“浮起来”。
- 关键不是阴影多深，而是阴影在
:hover时是否明显变大、变柔、下移——比如从0 2px 8px变成0 12px 24px - 阴影颜色别用纯黑：
rgba(0,0,0,0.12)比rgba(0,0,0,0.3)更自然，尤其浅色背景上 - 必须加
transition: box-shadow 0.3s ease，否则变化生硬，失去“轻盈感”
HTML结构要极简，但 class 名得带语义
别套一堆 wrapper div。卡片本身是 <article> 或 <div class="card"> 就够，重点是 class 名能一眼看出用途，比如 card 或 card--elevated，方便后续 JS 控制或媒体查询适配。
- 避免用
shadow-card这类冗余名——card本身已暗示需要样式支撑 - 如果卡片内含图片/标题/描述，用语义化标签：
<header>、<figure>，而非全塞进<div> - 不要给卡片设固定
height，让它由内容撑开，否则在响应式下容易溢出或留白异常
<div class="card">
<img src="cover.jpg" alt="封面">
<div class="card__body">
<h3>标题</h3>
<p>一段简介</p>
</div>
</div>
CSS里怎么让阴影“呼吸”而不是“砸下去”？
真正的浮动效果靠两组值切换：正常态轻微下沉 + 悬停态明显抬升。重点不是数值多大，而是差值是否足够感知，以及过渡是否顺滑。
- 默认状态建议：
box-shadow: 0 1px 3px rgba(0,0,0,0.1)（几乎不可见，只铺一层底） - 悬停状态推荐：
box-shadow: 0 10px 20px rgba(0,0,0,0.15), 0 6px 6px rgba(0,0,0,0.1)（双层阴影模拟环境光+接触阴影） - 加
transform: translateY(-2px)配合阴影，强化“离地”错觉——注意必须和transition同步作用于transform和box-shadow - 移动端慎用大阴影：
@media (max-width: 768px)下把悬停阴影缩回0 4px 12px，避免在小屏上显得笨重
为什么有些卡片悬停后边缘发虚或锯齿？
这通常不是阴影问题，而是元素本身没做抗锯齿处理。尤其当卡片带圆角或使用了 transform，GPU 渲染可能失真。
立即学习“前端免费学习笔记（深入）”；
- 强制启用硬件加速：
backface-visibility: hidden或transform: translateZ(0)（选其一即可） - 圆角别设太大：
border-radius: 8px比16px更稳妥，尤其在旧版 Safari 上 - 如果卡片背景是渐变或图片，确保
overflow: hidden，否则阴影可能被裁掉一部分 - 测试时别只看 Chrome——Safari 对
box-shadow的模糊半径渲染偏弱，Firefox 则更忠实，差异要实测
transition 的 timing function。用 ease-out 比 ease 更显轻盈，而 0.25s 是多数人觉得“刚好不拖沓”的临界点。 
