css `currentColor`和`inherit`

1. currentColor 是什么？

currentColor 是 CSS 里的一个特殊“关键字值”，表示：

使用当前元素的 color（文字颜色）作为值。

意思是：
无论你给元素的 color 设置成什么，使用 currentColor 的属性都会跟着变。

例子

div {
  color: red;        /* 文本颜色是红色 */
  border: 1px solid currentColor;  /* 边框自动跟随 color */
}

最终 border = 红色。

📌 常见使用场景：

• SVG 图标（让图标自动跟随文本颜色）
• 给 border / outline / box-shadow 使用同色
• 统一主题色的组件

---

2. inherit 是什么？

inherit 的作用是：

明确要求：从父元素继承这个属性的值。

例如：

.parent {
  color: blue;
}

.child {
  color: inherit;   /* 继承父元素的 blue */
}

⚠️ 并不是所有 CSS 属性默认就继承，举例：

属性	默认是否继承	用 inherit 会怎样
color	✔ 默认继承	子继续继承父
border	❌ 不继承	用 inherit 后才会继承父的 border
display	❌ 不继承	inherit=继承父 display

---

🎯 3. currentColor vs inherit（核心区别）

特性	currentColor	inherit
基于什么？	基于当前元素自己的 color	基于父元素的属性值
用途	让多个属性共享同一种颜色	强制属性从父元素继承
行为	不管父是谁 → 永远使用自己 color	完全依赖父元素属性
是否作用于非 color 属性	✔（border/background 等）	✔（所有属性）

举例说明区别

例子 1：父蓝色，子红色

.parent { color: blue; }
.child  { color: red; border-color: currentColor; }

结果：
子元素 color = red
border-color = red（因为 currentColor 指向“子自己的 color”）

---

.child { border-color: inherit; }

结果：border = blue（继承父）

---

🔥 总结一句话：

currentColor = 当前元素自己的 color 的别名。
inherit = 从父元素继承属性值。

这两个完全不是一个用途。

---

🧩 4. initial / unset

initial

恢复为 CSS 规范的“默认初始值”，不跟父元素有关。

例如 color 初始是 black。

div { color: initial; }  /* 相当于 color: black */

unset

• 如果属性默认继承 → 表现为 inherit
• 如果属性默认不继承 → 表现为 initial

是“最智能的重置”。

---

📌 最终超简表（收藏版）

关键字	作用
currentColor	使用当前元素的 color 属性值
inherit	强制从父元素继承
initial	使用属性的规范初始值
unset	继承属性时等于 inherit；否则等于 initial