CSS颜色currentcolor关键字_让边框与阴影跟随文字颜色

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-color
• text-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，不是父元素的文字色。