currentcolor 能让边框颜色自动匹配文字色，但很多人写完发现没生效——不是语法错，而是它只继承计算后的 color 值，且不触发重绘逻辑。
currentcolor 是什么，又不是什么
它是个 CSS 关键字，代表当前元素的 color 计算值（比如 rgb(33, 33, 33)），不是变量、不支持计算、不能在伪元素外“传递”给子元素的边框。
常见错误现象：border: 1px solid currentcolor 写了但边框还是默认黑色——大概率是该元素本身没设 color，或父级设了而子级没继承（color 不继承 border）。
- 必须显式设置该元素的
color（哪怕只是color: inherit） -
currentcolor在:before/:after中可用，但不能靠父级color“穿透”到子元素的border - 它不响应 JS 动态改
color后的边框重绘（部分浏览器有延迟，别依赖实时同步）
什么时候用 currentcolor 最合适
适合按钮、图标、输入框等需要边框/描边与文字保持视觉一致的组件，尤其当主题色通过 color 控制时。
立即学习“前端免费学习笔记（深入）”；
使用场景举例：一个可切换主题的按钮，文字色由 CSS 变量控制，边框想跟着变——直接用 currentcolor 比重复写变量更轻量。
- 按钮边框：
button { color: var(--text-primary); border: 1px solid currentcolor; } - SVG 内联图标描边：
svg path { stroke: currentcolor; }（前提是svg或其父元素有color） - 避免在
input上直接用——它的color默认不继承，需额外设color: inherit
兼容性与容易被忽略的细节
所有现代浏览器都支持 currentcolor，包括 IE9+，但要注意：它不参与层叠优先级计算，也不影响 specificity；它取的是最终计算值，所以媒体查询或 @supports 里用要小心。
- 如果元素
color是transparent，边框也会是透明——可能造成“消失”，需加兜底：border-color: currentcolor;配合border-style显式声明 - 在
transition中用currentcolor做边框渐变？不行。CSS 过渡不支持currentcolor插值，会跳变 - Flex/Grid 容器的
color不会自动传给子项边框，每个要用的元素得自己有color
最常被卡住的地方：以为写了 currentcolor 就万事大吉，结果忘了它根本不管“谁的颜色”，只认“自己的 color”。调不出来时，先打开开发者工具看那个元素的 computed color 是不是你预期的值。
