CSS实现盒子阴影扩散效果_调整box-shadow的模糊半径

box-shadow 的模糊半径（blur-radius）控制边缘柔和度，不改变阴影尺寸；真正实现“扩散”需依赖扩展半径（spread-radius），二者配合使用才能获得自然的光影效果。box-shadow 模糊半径越大，阴影越“虚”但不等于“扩散”很多人调大 blur-radius 发现阴影变淡、边缘发散，就以为是“扩散效果”，其实不是。CSS 的 box-shadow 本质是高斯模糊 + 颜色叠加，模糊半径只控制边缘柔和度，不改变阴影的原始尺寸或位置。真要让阴影“向外撑开”，得靠 spread-radius —— 它才是控制阴影几何扩张的关键参数。常见错误现象：box-shadow: 0 0 20px #000; 看起来像扩散，其实是模糊太强导致视觉误判；实际阴影面积没变，只是边缘被“吃掉”了。blur-radius 影响的是模糊程度，值为 0 时边缘锐利，越大越朦胧spread-radius 才真正扩大阴影的矩形范围，正值向外扩展，负值向内收缩两者同时存在时，先按 spread-radius 扩展基础形状，再用 blur-radius 对其边缘做模糊实现真正“扩散感”：blur-radius 和 spread-radius 要配合用纯靠模糊半径做“扩散”容易让阴影发灰、失焦；纯靠扩展半径又太生硬。真实可用的扩散效果，是用较小的 spread-radius 做几何扩张，再叠一个中等 blur-radius 柔化边缘。使用场景：按钮悬停放大时的阴影延展、卡片浮起动画、模态框背光扩散。立即学习“前端免费学习笔记（深入）”；示例（对比明显）： Tellers AI Tellers是一款自动视频编辑工具，可以将文本、文章或故事转换为视频。