CSS技巧：用 currentColor 提升样式的灵活性和一致性
内容提要
CSS 关键字 currentColor 可让边框、阴影、背景、轮廓、SVG 填充等属性自动取当前文本颜色；若未设置 color，则继承父元素颜色。其价值在于用更少代码实现动态一致的样式，适用于响应式设计、主题切换、图标与 SVG 配色、交互状态反馈及可复用组件，只需修改文本颜色即可同步相关元素颜色。
延伸解读
currentColor 的本质是颜色继承
currentColor 并非独立颜色值，而是取当前元素的 color 属性；若未设置，则继承父元素颜色。这意味着它把文本颜色作为其他属性的颜色来源，形成一种联动机制。理解这一点后，就能预判：修改 color 会同步影响边框、阴影、背景等使用 currentColor 的属性，而无需逐个调整。
适用属性广泛，但需注意背景色陷阱
文章列出 border-color、box-shadow、background-color、outline-color、SVG 的 fill 和 stroke 等均可接受 currentColor。其中 background-color 使用 currentColor 时，背景会与文字同色，可能导致文字不可读。实际使用时应结合场景判断，避免因颜色一致而牺牲可访问性。
主题切换与组件复用的简化思路
通过 CSS 变量控制 color，再让边框、阴影等使用 currentColor，切换主题时只需改变变量值，相关元素颜色自动同步。在可复用组件中，同样只需覆盖 color 就能适配不同上下文，减少重复声明。文章示例展示了这种用更少代码实现动态一致样式的方法。
交互反馈与 SVG 配色的实用场景
在按钮 hover 或 active 状态下改变 color，配合 transition 可让边框颜色平滑过渡，提供视觉反馈。对于 SVG 图标，将 fill 或 stroke 设为 currentColor，图标颜色会跟随文本颜色变化，便于统一风格。这些场景都体现了 currentColor 在动态样式中的灵活性。
Q&A
currentColor 是什么？它有什么作用？
currentColor 是 CSS 关键字，用于让边框、阴影、背景、轮廓、SVG 填充等属性自动取当前元素的文本颜色值。如果元素未设置 color，则继承父元素的颜色。它的作用是简化颜色同步，用更少代码实现动态一致的样式。
哪些 CSS 属性可以使用 currentColor？
可以接受 currentColor 的属性包括：边框颜色（border-color）、阴影颜色（box-shadow 和 text-shadow）、背景颜色（background-color）、轮廓颜色（outline-color）、SVG 填充色（fill 和 stroke）、列表项标记颜色（list-style-color）、文本装饰颜色（text-decoration-color）、列分隔线颜色（column-rule-color）。
如何用 currentColor 实现动态主题切换？
通过 CSS 变量定义主色，将元素的 color 设为该变量，其他属性（如背景色）使用 currentColor。切换主题时只需更改变量值，所有使用 currentColor 的属性会自动更新。例如：:root { --main-color: blue; } .element { color: var(--main-color); background-color: currentColor; } .dark-theme { --main-color: darkblue; }
currentColor 在响应式设计中有什么用处？
在响应式设计中，currentColor 可以确保边框、阴影等元素在不同设备上保持与文本颜色一致。例如，在媒体查询中改变文本颜色，边框颜色会自动跟随变化，无需额外代码。
如何用 currentColor 控制 SVG 图标的颜色？
对于 SVG，可以将 fill 或 stroke 属性设置为 currentColor，这样图标的填充色或描边色就会与当前文本颜色一致。例如：.icon { color: red; } .icon circle { fill: currentColor; } 这样圆形的填充色就是红色。
currentColor 如何用于交互状态反馈？
在按钮或链接的 hover、active 状态下，可以使用 currentColor 同步改变背景色或边框色。例如：.button { color: blue; border: 2px solid currentColor; transition: color 0.3s; } .button:hover { color: green; } 悬浮时边框颜色会随文本颜色变为绿色，提供视觉反馈。
