内联 SVG 图标填色应使用 fill="currentColor"（大小写严格），并确保父容器设置了 color；字体图标需避免手动设置 color 以保持继承；伪元素、border-color、box-shadow 等也支持 currentColor，但不支持动画过渡和赋值给 CSS 变量。
内联 SVG 图标怎么填色才能跟文字一致
直接在 标签里写 fill="currentColor"，大小写必须严格匹配，不能写成 fill="currentcolor" 或 fill: currentColor（后者是 CSS 语法，不适用于内联属性）。
- 确保父容器设置了
color，比如...
currentColor会回退到浏览器默认黑（rgb(0, 0, 0)） - 不要在 SVG 元素上同时设
fill内联样式，例如，它会覆盖fill="currentColor" - 如果 SVG 被包裹在
或里，只要该容器有生效的color，图标就自动响应
字体图标（如 IconFont）为什么没跟着变色
多数现代字体图标（如 Font Awesome 6、IconPark）默认用 color: inherit，本质就是靠继承父级 color 实现联动；但一旦你手动给图标加了 style="color: red" 或写了 .icon { color: #666 }，继承链就断了。
- 检查 DevTools 中图标元素的 computed
color值是否和父级一致 —— 不一致说明被某条 CSS 强制覆盖了 - 避免对图标标签（如
、）单独设color，让它“空着”才最安全 - 若用自定义字体图标，确认
@font-face没加font-display: optional等可能延迟渲染的声明（极少见，但会导致首次渲染时color未生效）
伪元素图标（::before / ::after）如何用 currentColor
伪元素本身没有 color 属性，但它能继承父元素的 color，所以 color: currentColor 在伪元素里是合法且有效的写法。
- 常用场景：按钮后缀箭头、列表项前缀符号、表单校验图标
- 示例：
.btn::after { content: "→"; color: currentColor; margin-left: 4px; } - 注意：如果父元素没显式设
color，伪元素的currentColor仍会取计算值（比如从继承的默认色），不是“无效”而是“有默认”
border-color 或 box-shadow 能不能也用 currentColor
可以，border-color、box-shadow、text-shadow 都支持 currentColor，但要注意兼容性边界和语义陷阱。
-
border: 1px solid currentColor完全合法，且比写死颜色更适配主题切换 -
box-shadow: 0 1px 2px currentColor有效，但注意：阴影是叠加效果，半透明需求得靠rgba()+ JS 或color-mix()，currentColor本身不含 alpha - IE11 和旧版 Safari 不支持
background-color: currentColor，别在这儿踩坑 -
currentColor不会响应color的 CSS 动画过渡 —— hover 时颜色渐变，边框或图标不会同步淡入，只会突变
真正容易被忽略的是：currentColor 不是变量，不能赋给 --c: currentColor 这类自定义属性；它只在渲染时实时读取计算值。所以别试图“存起来复用”，要让它直接出现在支持颜色的属性里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
