background-color: currentColor;

最新推荐文章于 2022-11-24 00:19:41 发布

郭宝

最新推荐文章于 2022-11-24 00:19:41 发布

阅读量2k

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/qq_35366269/article/details/100924958

版权

Web前端专栏收录该内容

282 篇文章 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

currentColor是CSS3中的新特性，用于设定元素颜色值等于其color属性的值。本文探讨了currentColor的作用及其用法，例如将其用作背景颜色，实现文字与背景的同步色彩效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

currentColor 是什么？

currentColor 是css3中的新属性，它的意思是设置颜色值为当前文字的颜色，也就是说currentColor的值 == color属性的值。

currentColor 怎么使用？

将当前标签的文字颜色作为背景颜色

<template>
    <div class="test">
      测试
    </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return {
      msg: ''
    };
  }
};
</script>

<style scoped>

  .test {
    font-size: 30px;
    color: gray;
    text-shadow: -2px 0px 1px white,2px 1px 1px black;
    background-color: currentColor;
  }

</style>

效果图：