CSS3 中 currentColor 关键字简介

currentColor

currentColor 代表了当前元素被应用上的 color 颜色值

如果当前元素没有在 CSS 里显示地指定一个 color 值,那它的颜色值就遵从 CSS 规则,从父级元素继承而来

<div class="test">hello world!</div>

<style>
.test {
  width: 100px;
  height: 100px;
  color: red;
  border: 1px solid currentColor;
}
</style>

上面例子的 currentColor 就引用了 color 的属性值,因此 div 出现了红色边框

currentColor 与 SVG

currentColor 也可用于 SVG 元素的颜色填充,比较常见的用途就是使 SVG 颜色与当前 color 属性值保持一致

svg {
  fill: currentColor;
}
除特殊说明外本人博客均属原创,转载请注明出处:http://blog.johnhan.cn/blog_1081.html
京ICP备19044523号-1