currentcolor读取的是当前元素自身最终计算出的color值，可能来自显式设置、继承或浏览器默认；它不会自动应用于所有颜色属性，必须在box-shadow、text-shadow、渐变、伪元素及svg fill等处显式声明才能生效。
直接改 color 就能批量更新边框、图标、阴影等颜色，无需重复写 HEX 值或维护 CSS 变量——但前提是别误以为它能“穿透”取父级 color。
currentColor 读的是谁的 color？
它读的是当前元素自身最终计算出的 color 值，不是父元素的 color，也不是 inherit。这个值可能来自显式设置（如 color: #3b82f6），也可能来自继承（比如父容器设了 color，子元素没覆盖），甚至浏览器默认（color: black）。
- 如果
.btn没写color，但它的父级.card有color: #ef4444，那.btn的currentColor就是#ef4444 - 如果
.btn svg显式写了color: transparent，那它的fill: currentColor就是透明——不会“跳过”去拿.card的值 - 调试时可临时加
outline: 1px solid red+color: red看是否生效，快速验证计算值是否符合预期
哪些地方必须手动写 currentColor 才能生效？
它不会自动继承到所有支持颜色的属性，必须显式写出。常见遗漏点包括：
-
box-shadow: 0 1px 2px rgba(currentColor, 0.2)—— 不能简写成box-shadow: 0 1px 2px currentColor，透明度得靠rgba() -
text-shadow: 1px 1px 2px currentColor—— 这个可以直写，但很多人只改color却忘了它 -
background: linear-gradient(to right, currentColor, transparent)—— 渐变色里也得手写，不会从color自动推导 -
::before { content: "•"; color: currentColor; }—— 伪元素内容默认不继承color，必须显式设
SVG 图标填色为什么经常失效？
失效几乎都和加载方式或结构有关，不是 currentColor 本身的问题：
- 用了
<img src="icon.svg">—— 外部 SVG 是独立文档，currentColor完全不生效 - 内联 SVG 里路径写了硬编码
fill="#000"，且没用 CSS 覆盖 —— 内联属性优先级高于外部样式 -
svg根元素加了style="fill: inherit"，但没配svg { fill: currentColor }规则 - 父级
color是transparent或unset，导致图标“看不见”，实际是填了透明色
✅ 正确姿势：用内联 SVG，CSS 中写 .icon svg { fill: currentColor; }，并确保父级有可计算的 color 值。
配合主题切换时最容易漏掉的环节
很多人用 --theme-color 控制 color，却忘了这些地方也要同步依赖 currentColor：
- 按钮悬停时只改
color，但border-color: currentColor和box-shadow: rgba(currentColor, 0.3)没跟着变 - 自定义复选框的
background-color: currentColor在:checked状态下没写 - 卡片分隔线用
border-bottom: 1px solid currentColor，但深色模式下父容器没重设color，导致线条消失 -
filter: drop-shadow(0 1px 2px currentColor)这种非标准阴影也得手写，否则不变色
真正可靠的路径是：只控制 color，其余所有颜色相关属性都用 currentColor 显式声明——少一个，主题就断一处。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
