CSS变量控制box-shadow需根级定义+组件引用，状态切换须手动设置伪类值并配transition，多层阴影应分层命名变量，注意IE不支持及模糊值性能陷阱。
用--shadow-blur等CSS变量控制阴影参数
直接改box-shadow值不现实，每次状态变化都重写整条声明太脆弱。CSS变量把模糊半径、偏移、颜色这些可变项抽出来，让样式层真正“可配置”。
关键不是定义变量，而是变量怎么用、在哪用——根级定义+组件级引用是最稳的组合：
-
:root里统一定义--shadow-h、--shadow-v、--shadow-blur、--shadow-color，避免散落在各处 - 组件类名里用
var(--shadow-blur)拼接完整box-shadow，别漏掉单位（px或rem） - JavaScript动态改值时，必须用
document.documentElement.style.setProperty()，改body或局部元素无效
hover和active状态下的变量切换逻辑
变量本身不会响应状态，得靠伪类触发不同值。常见误区是以为设了变量就能自动变，其实要手动为每种状态提供一套值。
比如悬停托起效果，本质是扩大模糊半径+减小透明度+微调偏移：
立即学习“前端免费学习笔记（深入）”；
-
:hover里把--shadow-blur从8px提到16px，--shadow-color从rgba(0,0,0,0.2)调成rgba(0,0,0,0.1) -
:active则反向操作：模糊半径缩到4px，颜色加深到rgba(0,0,0,0.3)，模拟按压感 - 必须配合
transition: box-shadow 0.2s ease，否则变量变了但阴影跳变
多层阴影叠加时变量怎么管理
单层阴影用一个变量够用，但多层（比如外扩+内陷+高光）就得拆开管，不然没法独立控制每层的模糊程度。
推荐按层级命名变量，而不是堆砌数字后缀：
- 外阴影：
--shadow-outer-blur、--shadow-outer-color - 内阴影：
--shadow-inner-blur、--shadow-inner-color - 高光层：
--shadow-highlight-blur、--shadow-highlight-color -
box-shadow里写成var(--shadow-outer-h) var(--shadow-outer-v) var(--shadow-outer-blur) var(--shadow-outer-color), inset var(--shadow-inner-h) ...
容易被忽略的兼容性和性能陷阱
变量在IE全系不支持，哪怕加了box-shadow降级写法，变量部分依然失效。另外模糊值不是越大越好：
- Chrome对
blur-radius超过50px会强制启用GPU渲染，但低端安卓机可能卡顿 - 变量值若带单位（如
12px），不能直接参与calc计算；想做动态缩放得用无单位数字+px拼接 - SSR场景下，服务端无法执行JS修改变量，首次渲染仍需预留默认值，否则空白
