能，但需父元素显式设置color且子元素未覆盖；currentColor是CSS关键字，始终等于计算后的color值，不支持参数、不可与CSS变量混用，IE9+支持但有局限。
currentColor 在 border-color 和 box-shadow 中能直接继承父级文字色吗
能，但有前提：父元素必须显式设置了 color，且子元素未覆盖该值（比如自己写了 color 或通过继承链被重置）。currentColor 不是“自动抓取当前文字颜色”，而是 CSS 关键字，它始终等于计算后的 color 值——这个值必须存在、可继承、未被遮蔽。
常见错误现象：border-color: currentColor 出现灰色或黑色边框，不是预期的文字色。原因通常是父级没设 color，或子元素的 color 被重置为 initial（比如某些重置样式表里对 button 或 input 的处理）。
- 使用场景：按钮边框、卡片描边、输入框 focus 状态阴影、图标容器的装饰线
- 参数差异：它不接受任何参数，就是字面量
currentColor，不能写成currentColor(0.5)或color(currentColor) - 性能影响：零成本，纯 CSS 关键字解析，无运行时计算
box-shadow 里用 currentColor 会触发重绘或失效吗
不会失效，但阴影颜色会严格绑定到当前 color 值——包括透明度。如果父级 color 是 rgba(0, 0, 0, 0.6)，那么 box-shadow: 0 2px 4px currentColor 的阴影就是半透黑；如果父级是 hsl(200, 100%, 50%)，阴影就跟着变蓝。这点常被忽略，导致暗色主题下阴影过深、浅色主题下几乎看不见。
- 容易踩的坑：在
:hover或:focus里只改了color，却忘了同步调整box-shadow的模糊半径或偏移，结果阴影“跳变”明显 - 兼容性：IE9+ 支持
currentColor，但 IE9 不支持多层box-shadow；若需兼容，避免在单条声明里混用currentColor和 fallback 颜色 - 实操建议：用
box-shadow: 0 1px 3px currentColor替代固定#333，再配合transition: box-shadow 0.2s，视觉更连贯
为什么子元素 border 写了 currentColor 却没生效
最常见原因是子元素自身定义了 color，哪怕只是 color: inherit，只要它出现在样式层叠中，就会成为新的“当前色”来源——而它继承的可能是祖父级甚至根元素的色，不是你想要的那个父级。
立即学习“前端免费学习笔记（深入）”；
- 检查顺序：打开 DevTools → 选中子元素 → 查看 Computed 面板里的
color值，确认它是否等于你期望的父级文字色 - 典型干扰源：
button默认有用户代理样式color: -internal-light-dark(black, white)；input在某些浏览器里会重置color；CSS 自定义属性（--text-color）未被color接收，不能触发currentColor - 绕过方式：不用继承，直接在父容器上设
color，子元素用border-color: currentColor，且确保子元素没写任何color相关声明（包括color: unset）
currentColor 和 CSS 变量混用是否可行
不行。currentColor 是关键字，不是变量，不能被 var(--c) 接收或赋值。你不能写 --border-color: currentColor，也不能在 calc() 里用它做颜色运算。
但可以迂回实现类似效果：用 color 触发继承，再让其他属性读取它。例如：
button {
color: var(--primary, #007bff);
}
button span {
border-color: currentColor;
}
这样改 --primary 就能批量控制文字色和边框色，但本质仍是靠 color 传递，不是变量直传。
- 性能提示：嵌套层级过深时（比如 5 层以上），
currentColor的继承链仍稳定，但可读性下降，建议在组件顶层统一设color - 真正容易被忽略的点：SVG 内联样式中
stroke="currentColor"和 CSS 中currentColor行为一致，但 SVG 外部引用（<use href></use>）可能丢失继承上下文
