时间戳

首页 > 解决方案 > {颜色：继承}与{颜色：currentColor}有什么区别？

css - {颜色：继承}与{颜色：currentColor}有什么区别？

问题描述

请看这个最小的例子

.inherit {
  color: red;
}
.inherit p {
  color: inherit;
}

.currentColor {
  color: red;
}
.currentColor p {
  color: currentColor;
}
<div class="inherit">
  <p>inherit</p>
</div>

<div class="currentColor">
  <p>currentColor</p>
</div>

这两个结果是一样的。

当我可以使用时currentColor，在属性中使用有什么区别吗？colorinherit

标签： css

解决方案

inherit表示使用父级使用的值。

currentColor遵循最接近的颜色属性值，

示例 1

这个 div 的边框颜色和框阴影颜色将为红色。因为 currentColor 遵循最接近的颜色属性值。

div { 
  color: red; 
  border: 5px solid currentColor;
  box-shadow: 0 0 5px solid currentColor;
}

示例 2

这个 div 的边框颜色和框阴影颜色将为蓝色。因为最接近的颜色属性值是在 body 和它的 blue 中定义的。

body {
  color: blue;
}

body > div { 
  border: 5px solid currentColor;
  box-shadow: 0 0 5px solid currentColor;
}

推荐阅读