调整HTML中按钮阴影模糊半径的流程-html教程-PHP中文网

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

调整html中按钮阴影模糊半径的流程

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 控制阴影本体的尺寸大小。调错一个，效果就偏得离谱。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

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

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

用 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 从 4px 改成 12px，首次悬停常有明显延迟或跳变，不是 JS 慢，是浏览器重绘策略导致的。

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