currentColor 是元素的 color 计算值，继承自文字颜色；若未显式设置 color，则取浏览器默认值（如 #000），并非透明或无色。
currentColor 是什么颜色？
currentColor 不是固定值，它等于元素的 color 计算值。也就是说，它继承的是文字颜色，不是边框颜色、背景色或其他任何颜色。很多人一看到 border-color: currentColor 就默认“边框会随文字变色”，但实际前提是：这个元素本身或其父级必须显式设置了 color —— 否则它就继承自浏览器默认（通常是 rgb(0, 0, 0) 或 #000），不是“透明”也不是“无色”。
常见错误现象：
– 按钮加了 border-color: currentColor，但没设 color，结果边框是黑的，和预期“跟主题色一致”不符
– 在 button 上用了，但按钮默认 color 被 UA 样式覆盖（比如 Chrome 的 button 默认 color: buttontext），导致 currentColor 表现不一致
- 使用场景：适合需要边框与文字同色的组件，如图标按钮、简洁输入框、语义化标签（
span带边框作强调） - 如果父容器设了
color: #3498db，子元素未重置color，那么它的currentColor就是#3498db - 注意：伪元素（如
::before）也支持currentColor，且同样继承宿主元素的color值
border-color: currentColor 在不同元素上的表现差异
不是所有元素都“天然适配”currentColor 边框。关键看它有没有可继承的 color 值，以及是否被 UA 样式干扰。
-
input、textarea默认没有color继承链（很多浏览器设为initial或强制为canvastext），直接写border-color: currentColor很可能得到灰色或黑色边框 -
button在 Firefox 中默认color: -internal-light-dark(black, white)，Chrome 则倾向buttontext，跨浏览器时表现不稳定 -
a标签天然有color（通常蓝色），所以border-color: currentColor在链接上效果直观，但要注意:hover等状态是否同步更新color - 自定义组件（如
my-button）建议显式声明color: inherit或绑定主题变量，避免依赖 UA 推断
currentColor 和 border 的性能/兼容性影响
用 currentColor 当边框色几乎零性能开销——它不是运行时计算，而是 CSS 属性继承链的一部分，浏览器在样式计算阶段就确定了值。但它对兼容性的“坑”藏得比较深。
立即学习“前端免费学习笔记（深入）”；
- IE9+ 支持
currentColor，但 IE9 不支持在border-color外的多数地方（比如box-shadow），不过这里只涉及边框，没问题 - 真正的问题是：当
color是通过 JS 动态修改（如el.style.color = 'red'），currentColor会实时响应；但若用CSS Custom Properties（如--text-color）间接控制color，部分旧版 Safari 对currentColor的响应有延迟或失效 - 不要指望
currentColor能“穿透” Shadow DOM 默认样式——如果组件 shadow root 内没显式设置color，宿主的color不会自动流入
一个可靠的小技巧：用 color + border-color 组合保底
与其赌 currentColor 自动生效，不如主动控制继承源头。最稳妥的做法是：给容器设 color，再让子元素边框用 currentColor，同时提供 fallback。
/* 示例：带边框的图标按钮 */
.icon-btn {
color: var(--icon-color, #007bff); /* 主动设 color，不依赖继承 */
border: 1px solid currentColor;
}
.icon-btn:hover {
color: var(--icon-hover-color, #0056b3);
}- 不推荐只写
border-color: currentColor却不设color—— 这等于把颜色逻辑交给浏览器猜 - 在 CSS-in-JS 或组件库中，建议把
color和border-color当成一对属性来管理，而不是拆开处理 - 调试时，直接检查 computed styles 里的
color值，比查border-color更快定位为什么currentColor没按预期工作
容易被忽略的一点：currentColor 不会“反向影响”color，它只是个读取器；改边框色不会改变文字颜色，但改文字颜色一定会立刻反映到边框上——这个单向性，在联动交互里得心里有数。
