box-shadow多层投影需按“底层→中层→上层”顺序书写，靠前阴影在下、靠后在上；三层分别模拟环境光、主投影与锐边光效，颜色宜分冷暖增强层次，hover/active状态应保持层数一致、仅调参数实现平滑过渡。
多重投影不是叠得越多越好，而是要分层控制：基础阴影打形、悬停强化体积感、点击反馈加光效——三层必须独立计算、分别绘制，否则会糊成一团。
用 box-shadow 实现多层投影的写法
CSS 的 box-shadow 支持逗号分隔的多值写法，每组值代表一层阴影。顺序很重要：靠前的阴影在下层，靠后的在上层。
- 第一层（最底层）：偏移小、模糊大，模拟环境光散射，例如
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) - 第二层（中层）：偏移适中、模糊中等，构成主投影，例如
2px 4px 8px rgba(0, 0, 0, 0.2) - 第三层（最上层）：偏移略大、模糊小甚至为 0，模拟硬边锐影或点击时的瞬时压感，例如
4px 6px 0 rgba(0, 0, 0, 0.25)
注意：所有层共用同一颜色通道时容易发灰；建议底层用偏蓝灰（rgba(30, 30, 50, 0.1)），中层用标准黑灰，顶层用稍暖的深灰增强对比。
hover 和 active 状态下如何动态增减投影层数
不要只改数值，要增删整层——CSS 中通过覆盖整个 box-shadow 声明来切换投影结构更可控。
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
立即学习“前端免费学习笔记（深入）”；
- 默认状态保留三层，但顶层模糊设为
0，视觉上收敛 -
:hover时追加第四层：微小正向transform: translateY(-1px)+ 新增一层-2px -2px 4px rgba(255, 255, 255, 0.4)模拟高光 -
:active时移除中层和顶层，仅保留底层 + 一个向下偏移更大的新层（如0 6px 16px rgba(0, 0, 0, 0.3)），模拟按压沉降
关键点：transition 只作用于可动画属性，box-shadow 支持过渡，但新增/删除某一层无法过渡——所以必须让所有层始终存在，仅调节其 opacity 或 blur 值来“显隐”。
Canvas 动态投影与 CSS 多重阴影混用时的冲突点
如果按钮同时用了 CSS box-shadow 和 Canvas 绘制的软阴影，会出现两套光影逻辑打架：Canvas 阴影随鼠标移动，CSS 阴影静止不动，视觉上像按钮在“拖着影子滑行”。
- 真实项目中，二者必须二选一：需要交互光影就彻底放弃
box-shadow，全由 Canvas 控制；只要基础反馈就别碰 Canvas，用纯 CSS 更轻量稳定 - 若强行共存，需在 Canvas 的
draw()中手动清除ctx.shadowColor，否则后续 Canvas 绘图都会带残影 - Canvas 内部绘制的“投影”本质是图形，不是 CSS 层叠上下文的一部分，
z-index对它完全无效
最易被忽略的是设备像素比：Canvas 投影若没按 window.devicePixelRatio 缩放 shadowBlur 和偏移量，在高清屏上会显得虚、弱、错位——这点 CSS 自动处理，Canvas 必须手动适配。
