currentColor 是 CSS 中实时继承元素 color 计算值的关键词，动态响应父级 color 变化；仅适用于颜色属性，不可用于非颜色上下文或赋值给自定义属性，现代浏览器均支持但需注意属性兼容性与失效静默问题。
currentColor 是什么，为什么它不等于“随便写个颜色名”
currentColor 不是预设色值，也不是变量，它是 CSS 中一个实时继承的关键词——它的值永远等于元素的 color 计算值（computed value），且会随父级 color 变化而动态更新。这点和 inherit 不同：inherit 只继承声明值（declared value），而 currentColor 继承的是最终生效的计算值（比如经过层叠、缩放、系统主题适配后的结果）。
- 它只作用于支持颜色值的 CSS 属性：如
border-color、fill、stroke、background-color（注意：IE 不支持在background-color中用currentColor） - 它不能用于非颜色上下文，比如
font-size: currentColor会直接失效（语法错误） - 它不是“取父级 color”，而是“取本元素当前 color 的计算值”——哪怕这个元素自己没设
color，也会从祖先链上继承并计算出一个确定值
哪些地方用 currentColor 最省事又不容易翻车
适合用 currentColor 的场景，核心是「需要保持与文字颜色一致的装饰性颜色」，且该元素本身不独立控制文字色：
SVG 图标内联时统一着色：
fill和stroke设为currentColor，图标就能随父级文字变色（暗色模式、链接悬停、禁用态自动适配）-
按钮边框或下划线：
border-bottom-color: currentColor比写死#007bff更健壮，尤其配合:hover改color时立即学习“前端免费学习笔记（深入）”；
表单控件伪元素（如
::before在input[type=checkbox]上画勾）：只要父容器设了color，勾的颜色就自动对齐避免在
background-color中用（老版本 Safari 和 IE11 不支持）避免在需要半透明的场景直接用（
currentColor本身不含 alpha；想实现淡色边框得配合rgba()+ JS 计算，不如用color-mix()或自定义属性）不要指望它响应
color的动画过渡——CSS 动画不会触发currentColor的重计算，它只在样式重排（reflow）或重绘（repaint）时更新
currentColor 和 CSS 自定义属性（--var）混用时的坑
currentColor 无法被 var(--main-color) 替代，也不能直接赋值给变量（--c: currentColor 是无效的）。但可以间接配合：
✅ 正确做法：用
color控制主色调，再让其他属性用currentColor跟随❌ 错误写法：
--text: currentColor—— 这行声明会被浏览器忽略，变量值为空⚠️ 混合陷阱：如果父级用了
color: var(--theme-color)，子元素用border-color: currentColor是 OK 的；但若父级color是通过 JS 动态改style.color，而没触发布局更新，某些旧版 Chrome 可能延迟更新currentColor值真实案例：组件库里按钮的
svg.icon内部fill设为currentColor，但按钮自身color来自var(--btn-text)——只要--btn-text最终影响到color计算，currentColor就能拿到
兼容性和调试时怎么确认 currentColor 真生效了
currentColor 在所有现代浏览器中都支持（Chrome 1+、Firefox 1.5+、Safari 3.1+、Edge 12+），真正要注意的是它是否被用在了支持该值的属性上。
- 调试技巧：在 DevTools 里选中元素，看“Computed”面板中对应属性（如
border-top-color）的值是不是显示为rgb(0, 123, 255)这类具体色值，而不是currentColor字样——显示为具体 RGB/HEX 才说明它已成功解析 - 兼容 fallback：如果必须支持 IE11，别用
currentColor做关键视觉，或加一层降级：border-color: #007bff; border-color: currentColor;（后一句覆盖前一句，IE 忽略不认识的值） - 注意伪元素限制：
::placeholder中的color不会影响其内部currentColor，因为::placeholder是独立继承链
复杂点在于它不显式“绑定”，也不报错，失效时往往静默——比如写在不支持的属性里，或父级 color 是 transparent 却期望边框有颜色，这时候得回头查 computed color 值，而不是怀疑语法。
