JavaScript通过操作CSS的box-shadow/text-shadow属性或CSS变量来动态控制阴影效果，支持内联样式、类名切换、交互响应及主题适配，CSS变量可读写并自动重绘。
JavaScript 本身不直接“实现”阴影效果，而是通过操作元素的 CSS 样式（比如 box-shadow 或 text-shadow）来动态控制阴影；CSS 变量（Custom Properties）则由 CSS 定义，JavaScript 可读写其值，从而实现样式与逻辑的灵活联动。
用 JavaScript 动态设置阴影效果
阴影本质是 CSS 属性，JS 通过修改 style 或 classList 来触发变化：
- 直接设置内联样式：
element.style.boxShadow = "2px 2px 8px rgba(0,0,0,0.2)"; - 切换预定义的 CSS 类（推荐，利于维护和动画）：
element.classList.add("has-shadow");
对应 CSS 中：.has-shadow { box-shadow: 0 4px 12px rgba(0,0,0,0.15); } - 响应交互（如鼠标悬停、点击）：
button.addEventListener("mouseenter", () => { btn.style.boxShadow = "0 6px 16px rgba(0,82,204,0.3)"; });
在 CSS 中定义变量并用于阴影
先在 CSS 中声明变量（通常放在 :root 或组件选择器内），再在阴影属性中引用：
- CSS 示例：
:root {
--shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
}.card { box-shadow: var(--shadow-md); }
用 JavaScript 读写 CSS 变量
借助 getComputedStyle 读取，用 style.setProperty 修改：
立即学习“Java免费学习笔记（深入）”；
- 读取当前值：
const root = document.documentElement;
const currentShadow = getComputedStyle(root).getPropertyValue("--shadow-md").trim(); - 动态更新变量（影响所有使用该变量的元素）：
root.style.setProperty("--shadow-md", "0 6px 12px rgba(100,100,255,0.2)"); - 配合主题切换：
document.body.setAttribute("data-theme", "dark");
在 CSS 中用[data-theme="dark"] :root { --shadow-md: 0 4px 8px rgba(0,0,0,0.3); }
实用小技巧
- 阴影值可拆解为多个变量（如
--shadow-x、--shadow-blur），组合使用更灵活 - 修改 CSS 变量后，依赖它的
box-shadow会自动重绘，无需手动刷新 - 避免在循环中频繁调用
setProperty，可批量更新或使用 CSS 动画替代逐帧 JS 控制
