currentColor 取的是元素自身最终计算出的 color 值，可能是继承自父级，也可能是显式设置或浏览器默认值；它不穿透、不继承、不可赋值给 CSS 变量。
currentColor 不是“继承父级颜色”，而是取当前元素自身 color 的计算值 —— 这个值可能来自父级继承，也可能来自自己显式设置。搞错这点，样式就会在嵌套中意外失效。
currentColor 取的是哪个 color 值？
它读取的是该元素**最终计算出的 color 值**，不是父元素的 color，也不是 inherit。即使你没写 color，浏览器也会用默认值（如 color: black）参与计算，currentColor 就取这个结果。
- 如果元素写了
color: #f00，currentColor就是#f00 - 如果没写
color，但父元素是color: blue，且该元素未重置，那它的color计算值就是blue，currentColor也是blue - 如果子元素显式设了
color: transparent，那它的currentColor就是transparent，哪怕父级是红色 —— 此时不会“穿透”去拿父级的值
SVG 图标填色为什么有时不随文字变色？
常见错误是把 fill 写在 SVG 标签上，而不是 CSS 里；或者 SVG 是外部引用（<img src="icon.svg">），这种情况下内联样式无法控制 fill，currentColor 完全不生效。
- ✅ 正确：使用内联 SVG，并在 CSS 中写
svg { fill: currentColor; }或.icon svg { fill: currentColor; } - ❌ 错误：
<img class="icon" src="icon.svg">—— 外部 SVG 文件中的fill是硬编码或独立作用域，不受宿主页面currentColor影响 - ⚠️ 注意：
stroke同样适用currentColor，但需确保 SVG 路径本身有描边属性（如stroke="currentColor"或 CSS 控制）
用 currentColor 做主题切换时，哪些地方容易漏掉？
很多人只改了文字和边框，却忘了 box-shadow、text-shadow、伪元素内容、甚至 background-color（当需要半透底色时）—— 这些都支持 currentColor，但必须显式写出，不会自动继承。
立即学习“前端免费学习笔记（深入）”；
- 按钮悬停时只改
color，但box-shadow: 0 2px 4px rgba(currentColor, 0.3)没同步更新，阴影就卡在旧色上 - 用
::before做装饰点，写了content: "•";却没加color: currentColor，导致点始终是黑色 -
background: linear-gradient(to right, currentColor, transparent)可用于渐变下划线，但必须手写，不能靠继承
currentColor 和 CSS 自定义变量混用要注意什么？
currentColor 无法直接赋值给 --my-color 变量（CSS 不允许变量里放关键字），但可以反过来：用变量控制 color，再让 currentColor 去读它 —— 这才是推荐路径。
- ✅ 推荐：
:root { --theme-color: #007bff; } .btn { color: var(--theme-color); border-color: currentColor; } - ❌ 无效：
.btn { --border-color: currentColor; border-color: var(--border-color); }—— 浏览器会报错或忽略 - ? 提示：想动态切换多组颜色（比如深色/浅色模式），优先在根节点或容器上设
color，再让子组件统一用currentColor，比满屏var()更轻量
最常被忽略的一点：currentColor 对可访问性有隐含影响。当你用它驱动边框、图标、阴影时，要确保新生成的颜色组合仍满足 WCAG 对比度要求 —— 它只是帮你省代码，不替你做设计判断。
