currentColor 是 CSS 动态关键字，值恒等于元素 color 计算值；它使 border-color 等属性自动同步文字颜色，提升主题切换与组件复用灵活性。
currentColor 是什么，它为什么能自动同步文字颜色
currentColor 是一个 CSS 关键字，它的值始终等于元素的 color 属性计算值。它不是固定颜色，而是一个“动态引用”——只要 color 改变，所有用到 currentColor 的地方（比如 border-color、fill、outline-color）会自动跟着变。
这比手动写死颜色（如 border-color: #333）更灵活，尤其适合组件复用、主题切换或响应式配色场景。
怎么用 currentColor 设置 border 颜色
直接把 currentColor 当作颜色值赋给 border-color 即可。注意：必须确保该元素本身或其继承链上有明确的 color 值，否则 currentColor 会回退到浏览器默认（通常是 rgb(0, 0, 0)）。
- 支持所有
border-*相关属性：border-color、border-top-color、border-bottom-color等 - 可以混用：
border: 2px solid currentColor是完全合法的 - 在伪元素中也生效：
::before { color: inherit; border-color: currentColor; }
.btn {
color: #007bff;
border: 2px solid currentColor;
}
.btn:hover {
color: #0056b3; / border 自动变深 /
}
容易踩的坑：currentColor 不生效的常见原因
看似简单，但实际中常因隐式继承或层叠问题导致失效。
立即学习“前端免费学习笔记（深入）”；
-
color没被显式设置，且父级也没传下来（比如默认无color，子元素用currentColor就是黑色）- 用了
inherit但父元素的color是transparent或unset，此时currentColor也会是那个值- 在 SVG 中使用时，
根元素不继承color，需显式加color: inherit- 某些旧版 Safari（currentColor 在
box-shadow或渐变中的支持不完整，但border-color基本都 OK进阶用法：配合自定义属性实现可控同步
如果想让边框色“跟随文字色但略作调整”（比如总是浅一号），纯
currentColor不够用。这时可以结合color-mix()（现代浏览器）或 CSS 自定义属性做中间层：:root { --text-color: #2c3e50; }.card { color: var(--text-color); border-color: color-mix(in srgb, currentColor 80%, white 20%); }
不过要注意：
color-mix()兼容性有限（Chrome 111+、Safari 16.4+），生产环境建议降级为currentColor+ 媒体查询或 JS 检测。真正关键的是别忘了检查 computed
color值——很多时候 border 没变，只是文字本身没颜色可继承。 - 用了
