spread-radius是box-shadow第四个参数，控制阴影几何扩张或收缩：正值向外扩散、负值向内收缩、0则不扩不缩；必须显式写出长度单位（如px），漏写则无扩散效果。
阴影颜色本身没有“扩散范围”——真正控制扩散的是 box-shadow 的第四个参数 spread-radius，颜色透明度（如 rgba() 中的 alpha）只影响深浅，不改变尺寸。
spread-radius 是什么，怎么写才生效
它就是 box-shadow 语法里排第四的长度值，必须显式写出，不能省略。漏掉它，阴影就只有模糊，没有几何扩张或收缩。
- 写法示例：
box-shadow: 0 2px 8px 2px rgba(0,0,0,0.1)—— 第四个2px就是向外扩散 2px - 负值有效：
box-shadow: 0 0 0 -1px rgba(0,0,0,0.08)可模拟细描边，但 alpha 要足够低，否则边缘发硬 - 设为
0（或省略）时，阴影轮廓严格贴合元素 border-box 边界，不扩不缩 - 单位必须是长度单位（
px、em、vmin等），不能是百分比或无单位数字
为什么加了 spread 却看不出变化
不是参数没起作用，而是被其他因素掩盖了视觉反馈。
-
blur-radius太大（比如 >12px），模糊边缘吃掉了 spread 的几何变化，先试box-shadow: 0 0 0 4px #000看纯扩散效果 - 颜色太淡（如
rgba(0,0,0,0.05)），扩散后更难察觉，临时换成rgba(0,0,0,0.3)调试 - 父容器有
overflow: hidden，直接把扩散出去的部分裁掉，用outline: 1px solid red可辅助定位是否被截断 - 元素本身没设置
border-radius，而你期望圆角阴影——spread-radius不自动适配圆角，需手动匹配数值，否则角落断裂
多层阴影里 spread 怎么配合 blur 才自然
单靠增大 blur-radius 会虚化失焦，纯靠增大 spread-radius 又太生硬。真实光影需要两者协同。
- 推荐组合：小 spread（
1px–4px）+ 中等 blur（4px–12px），例如box-shadow: 0 4px 12px 2px rgba(0,0,0,0.08) - 避免堆叠多个低 alpha 阴影来“凑扩散”——浏览器像素混合非线性，两个
rgba(0,0,0,0.1)不等于0.2，还可能触发移动端渲染警告 - 内凹 + 外凸双阴影要分开写：
box-shadow: inset 0 -2px 4px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.1)，不要试图用一层实现 - 移动端慎用固定
px值，高 DPR 屏幕下显得过重；可用vmin或clamp()动态缩放，例如box-shadow: 0 0.15vmin 0.4vmin 0.1vmin var(--shadow-color)
明暗模式下 spread 和颜色怎么联动
系统切换暗色模式时，spread-radius 不变，但颜色若写死就会突兀。关键在把颜色抽成 CSS 变量，再用媒体查询覆盖。
- 根级定义：
:root { --shadow-color: rgba(0, 0, 0, 0.1); } - 暗色覆盖：
@media (prefers-color-scheme: dark) { :root { --shadow-color: rgba(255, 255, 255, 0.06); } } - 别用
drop-shadow()替代——它在暗色下易过曝，且不响应prefers-color-scheme - 高对比度模式（
@media (forced-colors: active)）下所有阴影会被剥离，此时应降级为border或背景色差，而非依赖 spread 效果
真正容易被忽略的是：spread-radius 是一个“绝对偏移量”，它不受元素自身宽高影响，但会被父容器的 transform、scale 或 zoom 等比例缩放——调试时若发现扩散异常，先检查祖先元素有没有这些属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
