按钮必须挂载在body顶层且祖先无transform等触发层叠上下文的属性，否则会被截断；投影优先用box-shadow，悬浮动画慎用scale和all过渡，移动端需适配safe-area-inset-bottom并保证48px点击区域。

按钮挂载位置错误导致投影被截断

卡片布局里直接写 <button></button>，投影再漂亮也白搭——它会被父容器的 overflow: hidden、transform 或非 auto 的 z-index 层叠上下文吞掉。常见现象是：鼠标悬停时阴影只显示半截，或者完全点不中按钮。

• 必须把按钮节点直接放在 最顶层，和卡片容器平级，不能嵌套在 <div class="card-grid"> 之类结构里 <li>检查按钮所有祖先元素，禁用 <code>transform、filter、will-change ——哪怕只加了一行 scale(1) 都会新建层叠上下文
• React/Vue 中若用 Portal 挂载，确保 Portal 容器本身没被包裹在带层叠上下文的组件内

投影用 box-shadow 还是 Canvas？

纯 CSS 卡片悬浮投影，box-shadow 足够且更轻量；Canvas 动态投影适合需要随鼠标实时偏移光源的高级场景，但代价是复杂度陡增、移动端兼容性差、动画易掉帧。


HTML Extract
使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...
下载
• 常规需求用 box-shadow：hover 时加大 blur 和 offset，比如 box-shadow: 0 6px 16px rgba(0,0,0,0.15)
• 别用 margin-top 或 top 实现“上浮”，会触发重排，卡片网格抖动；改用 transform: translateY(-4px)
• Canvas 方案仅当需模拟真实光源（如阴影角度随鼠标移动）才考虑，否则属于过度设计

transform 和 transition 组合踩坑点

悬浮动画卡顿、点击区域跳变、iOS 上闪屏，八成出在这组属性搭配上。

• transition 必须限定为 transform 和 box-shadow，写成 all 0.3s 会连 width、padding 一起过渡，导致 hit area 收缩
• transform: scale() 在 hover 里慎用——文字缩放后可能撑破按钮边界，移动端尤其明显
• 加 will-change: transform 可提前触发 GPU 合成，但只在真正需要高性能动画时启用，滥用反而增加内存开销

移动端安全区与点击区域失效

iOS 键盘弹出时按钮消失、小屏点不中，往往不是样式没写对，而是忽略了物理交互约束。

• bottom 值必须含 env(safe-area-inset-bottom)，例如 bottom: calc(20px + env(safe-area-inset-bottom))
• 按钮最小尺寸按物理像素算：至少 48px × 48px，用 padding 控制，别设死 width/height
• 加 touch-action: manipulation 防 iOS 300ms 延迟，同时确保 <button></button> 元素有 aria-label，否则屏幕阅读器和键盘 Tab 都绕过它
真实项目里最常被忽略的，是层叠上下文和安全区的组合影响——按钮在桌面端一切正常，一到 iPhone 就被键盘顶走或点不中，问题根源往往不在按钮本身，而在它上面三层的某个 transform 或漏写的 env()。