box-shadow 使用 currentcolor 无反应是因为它只继承元素自身的 color 值而非 background-color；需显式设置 color（如 color: var(--shadow-color)）才能使阴影随主题色动态变化。
box-shadow 用 currentColor 为什么没反应？
因为 currentColor 只继承元素自身的 color 值，不是背景色。如果你的文本是黑色、背景是蓝色，阴影颜色还是黑的——它根本不知道背景长啥样。
常见错误现象：box-shadow: 0 2px 4px currentColor; 写了但阴影颜色和背景完全不搭，甚至看不见（比如深色背景+黑字，阴影也黑）。
- 必须确保目标元素设置了明确的
color，且该值与你期望的阴影色一致（例如给按钮设color: var(--primary);，再用currentColor） - 不能指望它自动读取
background-color或父级背景——CSS 没这个能力 - 在伪元素（如
::before）上用currentColor，继承的是宿主元素的color，不是伪元素自己的样式
想让阴影“融入背景”，currentColor 不是万能解
真正能动态匹配背景色的方案，本质是让阴影色和背景色同源。这时候要靠 CSS 自定义属性 + currentColor 配合，而不是单靠 currentColor。
使用场景：组件需要适配多种主题（浅色/深色/品牌色），又不想为每种写一堆 box-shadow。
- 把主题色统一定义在
:root或组件类上，比如--shadow-color: #007bff; - 设置
color: var(--shadow-color);（哪怕文字不需要显色，也可以设成透明或 off-screen） - 再写
box-shadow: 0 2px 8px currentColor;—— 这时阴影就跟着变量走了 - 注意：如果用了
opacity或半透阴影，currentColor的 alpha 值不会自动叠加，得手动写rgba(var(--r), var(--g), var(--b), 0.2)类方式
currentColor 在 box-shadow 中的兼容性与性能
它在所有现代浏览器中都支持（Chrome 49+、Firefox 43+、Safari 9.1+），IE 完全不支持。性能上毫无压力——它只是个颜色别名，不触发重排重绘。
- 不要在大量列表项里滥用带
currentColor的复杂阴影（比如多层模糊+扩散），视觉开销来自模糊计算本身，不是currentColor - Safari 对
currentColor在box-shadow中的解析更严格：如果color是transparent，某些旧版会渲染成黑色而非透明，建议显式写rgba(0,0,0,0) - 用
prefers-color-scheme切换主题时，只要color响应式更新了，currentColor就自动生效，无需 JS 干预
替代方案：什么时候该放弃 currentColor？
当背景色来自图片、渐变、或无法映射到单一色值时，currentColor 就失效了。比如卡片背景是 linear-gradient(to br, #ff9a9e, #fad0c4)，阴影不可能“融合”这种混合色。
- 纯色背景 + 主题化控制 → 用
currentColor+ CSS 变量，最轻量 - 需要阴影带透明度且精确控制 → 直接写
rgba()，避免currentColor和 opacity 叠加的不可控感 - 背景是图片/渐变/或者阴影需随滚动视差变化 → 只能 JS 计算主色调后注入内联样式，
currentColor不适用
真正难的从来不是怎么写那行 box-shadow，而是想清楚：阴影到底该“跟谁走”——是文字色、主题色，还是背景的视觉重心。选错源头，后面全是徒劳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
