currentcolor取当前元素自身计算出的color值，非继承父级；边框为黑因元素无有效color值而回退至rgb(0,0,0)；仅内联svg支持fill="currentcolor"，且只作用于接受类型的css属性。
currentColor 不是“继承父级 color”，而是取**当前元素自身计算出的 color 值**——哪怕这个值来自祖先，它也只认最终生效的那个，不穿透、不猜测、不 fallback 到透明。
为什么 border-color: currentColor 有时是黑的
最常见原因是：元素没显式设 color，也没从祖先链继承到有效颜色值。浏览器不会留空，而是回退到默认 rgb(0, 0, 0)（黑）。
- 检查开发者工具「Computed」面板里的
color值，不是inherit或unset，而要是具体颜色（如rgb(34, 197, 94)） -
<button></button>、<input>等表单控件受 UA 样式干扰严重，Chrome 默认color: buttontext，Firefox 可能是-internal-light-dark()，结果不可控 - 解决办法：给宿主元素加
color: inherit或直接设主题色，比如color: var(--theme-color, #2563eb)
fill="currentColor" 在 SVG 中失效的真正原因
它只在**内联 SVG**（即 <svg>...</svg> 直接写在 HTML 中）里生效；<img src="icon.svg"> 或 CSS background-image 完全无效，因为样式上下文被隔离了。
- 删掉 SVG 源码里所有硬编码的
fill、stroke属性（例如fill="#000"），否则会按层叠规则覆盖currentColor - React/Vue 等框架注入 SVG 时，注意属性名是否被转义成
fill="%23000"等 URL 编码格式 - 伪元素（如
::before）里用fill: currentColor是合法的，但前提是宿主元素（即声明::before的那个元素）本身有计算出的color
哪些属性能用 currentColor，哪些不能
它只在语法上接受 <color></color> 类型的属性中合法，不是名字带“色”就能用。
- ✅ 安全可用：
border-color、outline-color、box-shadow、text-shadow、background-color（现代浏览器）、fill/stroke（SVG 元素内） - ❌ 直接失效：
background-image: linear-gradient(currentColor, #fff)整条声明被忽略；font-size: currentColor是语法错误；opacity和filter也不认 - ⚠️ 半支持：
rgba(currentColor, 0.5)在 Safari 15.4 之前、旧版 Chrome 中不解析，建议改用color-mix(in srgb, currentColor 50%, transparent)
最容易被忽略的一点：它不参与 CSS 动画过渡——color 动画过程中，currentColor 不会实时重算，只在动画帧结束、样式重排后才更新。如果要做平滑渐变边框，得用 color-mix() 或自定义属性配合 JS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
