currentcolor 是当前元素 color 属性的计算值，非固定颜色；它可被 border-color、outline-color、box-shadow（现代浏览器）等支持属性使用，但不适用于 background-color 或 color 自身，且伪元素需显式设置 color: inherit 才能继承父级颜色。
currentcolor 是什么颜色？
它不是固定值，而是实时取当前元素的 color 计算值。比如文字是 color: #333，那 border-color: currentcolor 就等于 #333；文字设成 color: inherit，它就继续向上继承——本质是 CSS 属性值的“别名”，不是变量。
常见错误现象：box-shadow: 0 0 4px currentcolor 在某些旧版 Safari 里不生效，因为早期只支持 currentcolor 用于边框、轮廓等有限属性，阴影是后来才加的。
哪些 CSS 属性能用 currentcolor？
不是所有地方都能用。目前主流浏览器支持的有：
-
border-color、border-top-color等细分边框色 outline-colortext-decoration-color-
fill和stroke（SVG 内联样式或 CSS 中） -
box-shadow（Chrome 65+、Firefox 61+、Safari 12.1+）
不能用在：background-color、color 自身、opacity、filter 里任何颜色参数。试图写 background: currentcolor 会直接被忽略。
立即学习“前端免费学习笔记（深入）”；
为什么 border 和 shadow 都用 currentcolor 还是不同色？
因为它们读取的是「计算后」的 color 值，但触发时机和继承链可能不同：
- 如果父元素设了
color: red，子元素没设color，那两者都取red - 但如果子元素写了
color: rgba(0,0,0,0.5)，而边框用了border-color: currentcolor，阴影用了box-shadow: 0 0 2px currentcolor，那两者都带透明度——这没问题 - 真正出问题的是：子元素用了
color: transparent，这时currentcolor就是完全透明，边框看不见，阴影也几乎不可见（除非模糊半径大到溢出）
性能影响极小，currentcolor 是静态解析的，不触发重排重绘，比 JS 动态改色更轻量。
兼容性兜底怎么写才不翻车？
不能只靠 currentcolor，得给老浏览器 fallback：
- 用层叠顺序：先写兼容值，再覆盖
currentcolor，比如border-color: #666; border-color: currentcolor; - 别在同一个声明里混用，
border: 1px solid currentcolor在 IE11 及更早版本会整个声明失效，必须拆成border-width、border-style、border-color单独写 - Sass/Less 用户注意：预处理器不会编译
currentcolor，它就是字面量，别试图用#{...}包裹它
最易被忽略的一点：伪元素（如 ::before）默认没有 color 继承，除非显式设 color: inherit，否则它的 currentcolor 是初始值 black，不是父元素的文字色。
