用currentColor可使边框颜色自动继承文字颜色，它在border-color、outline-color、box-shadow、SVG的fill/stroke及伪元素样式中生效，但不适用于非颜色属性。
边框颜色怎么自动继承文字颜色？用 currentColor
currentColor 是 CSS 中一个特殊关键字，它会取当前元素的 color 值，并在任何支持颜色值的地方复用。想让边框、图标、伪元素等“跟着文字颜色走”，直接写 border-color: currentColor 就行，不用 JS 或重复定义变量。
currentColor 在哪些地方能用？
它不是万能的，只在**接受颜色值的 CSS 属性**中生效。常见可用场景包括：
-
border-color、border-top-color等单边颜色 outline-color-
box-shadow的颜色部分（如box-shadow: 0 0 4px currentColor） -
fill和stroke（用于 SVG 内联样式或 CSS 控制 SVG 图形） -
::before/::after的color、background-color、border-color
不能用在 background-image、transform、font-size 这类非颜色属性里。
为什么有时候 currentColor 没反应？
常见失效原因有这几个：
立即学习“前端免费学习笔记（深入）”；
- 父元素没设
color，而子元素又没继承到——currentColor取的是**计算后的color值**，不是声明值；如果整条继承链上都没显式设置color，就会回退到浏览器默认（通常是rgb(0, 0, 0)或rgb(33, 33, 33)） - 用了
border: 1px solid currentColor却没显示边框——检查是否同时设置了border-style: none或border-width: 0，覆盖了样式 - 在 SVG 中用
fill="currentColor"但外层没设color——SVG 元素本身不继承color，得确保其容器（比如父级或自身）有明确的color声明
button {
color: #007bff;
border: 2px solid currentColor; /* 边框自动变蓝 */
}
button:hover {
color: #0056b3; / hover 时文字变深，边框同步变深 /
}
和 CSS 自定义属性比，currentColor 有什么不同？
currentColor 是浏览器原生机制，无需定义、无作用域限制、自动响应 color 变化（包括伪类、媒体查询、CSS 动画中的 color 变更）。而 --text-color: #007bff 需手动维护，且不会随 color 动态更新——除非你用 JS 同步修改变量，或者用 color 覆盖变量再层层 var(--text-color)，反而绕远了。
真正需要动态颜色联动时，优先试 currentColor；只有当颜色来源和文字无关（比如主题色独立于文本色），才考虑自定义属性。
