box-shadow的blur-radius调大被裁剪，主因是父容器overflow:hidden裁剪模糊区域；解决方法为：移除overflow:hidden、增加spread-radius补偿（如+2px）、或添加padding预留空间。

box-shadow 的 blur-radius 参数怎么改才不被裁剪

blur-radius 值一调大，阴影就“少一半”，其实是父容器或自身设置了 overflow: hidden，模糊部分被直接切掉了。这不是 bug，是渲染规则——box-shadow 默认不占布局空间，但视觉区域仍受容器裁剪限制。

• 优先检查按钮父级是否带 overflow: hidden 或 overflow: auto，特别是用 flex / grid 布局时容易漏掉
• 加 spread-radius 补偿：比如原写 box-shadow: 2px 2px 12px rgba(0,0,0,0.2)，改成 box-shadow: 2px 2px 12px 2px rgba(0,0,0,0.2)，多出的 2px 能把模糊边缘“撑”出来
• 给按钮加一点 padding 或 margin，留出物理空间容纳模糊扩散区（尤其在紧凑布局里很有效）

blur-radius 和 spread-radius 到底有什么区别

很多人把两者都叫“模糊”，但它们干的事完全不同：blur-radius 控制阴影边缘的软硬程度，spread-radius 控制阴影本体的尺寸大小。调错一个，效果就偏得离谱。

• blur-radius 是“虚化”：值为 0 时边缘锐利；到 4px 开始柔和；超过 20px 容易发散、失焦，尤其在小按钮上显得脏
• spread-radius 是“膨胀”：正值让阴影整体变大一圈（类似描边），负值则收缩；它不模糊，只改变实边范围
• 典型组合：按钮常用 box-shadow: 0 2px 6px 1px rgba(0,0,0,0.15) —— 6px 负责柔边，1px 负责稳住轮廓

响应式场景下 blur-radius 怎么适配不同屏幕

固定写 box-shadow: 0 2px 8px rgba(0,0,0,0.2) 在手机上会显得过重，在桌面端又可能太轻。不能只靠媒体查询硬切数值，得考虑视觉权重一致性。

Html To Pdf

使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

下载

• 用 rem 或 em 单位替代 px：例如 box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.2)，随根字体缩放自动调整
• 避免在移动端设大于 4px 的 blur-radius，小屏下高斯模糊容易糊成一团，失去方向感
• 深色模式下别只改颜色——blur-radius 同样要降档，比如从 6px 降到 3px，否则暗背景下虚影更难辨识

hover 时加大 blur-radius 的常见卡顿问题

直接在 :hover 里把 blur-radius 从 4px 改成 12px，首次悬停常有明显延迟或跳变，不是 JS 慢，是浏览器重绘策略导致的。

立即学习“前端免费学习笔记（深入）”；

• transition 必须写在默认状态（非 :hover），且只限定属性：transition: box-shadow 0.2s ease;
• 别用 transition: all 0.2s —— 会意外触发 transform 或 opacity 变化，引发额外合成层切换
• 如果必须大幅变化，建议用两段式：先微调 blur-radius + spread-radius，再叠加一层内阴影（inset）增强立体感，比单靠模糊更稳定

blur-radius 看似只是个数字，但它和容器裁剪、单位选择、深色模式、悬停动画全绑在一起——改一个值，得同步看四面。