什么是currentColor

最新推荐文章于 2023-06-13 17:12:06 发布
最新推荐文章于 2023-06-13 17:12:06 发布
阅读量3.2k 收藏
点赞数
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yuoliku/article/details/116142381
版权
本文介绍了CSS中的currentColor属性，它允许元素颜色值应用于其他接受颜色的属性。通过一个按钮样例，展示了currentColor如何随父元素颜色变化。同时提到了浏览器兼容性查询资源。
摘要由CSDN通过智能技术生成

前言

在项目中想要更改icon的颜色，看到了currentColor，对于这个没有见过的属性一脸蒙蔽。然后通过百度了解了该属性，本文主要就是简单的介绍下currentColor的使用，以及什么是currentColor。
image.png

什么是currentColor

Css3的一个关键字，用于描述当前color的颜色，如果当前元素css未显式指明color，则继承父元素的颜色

您可以使用此值来表示要将color的值用于接受颜色值的其他属性：边框，框阴影，轮廓或背景。来源于此网站的解释CSS-tricks

栗子

button父容器css

    .base-button-container {
   
        height: 40px;
        width
最低0.47元/天 解锁文章
JINMINGIS
关注
专栏目录
CSS3变量currentColor浅析
Aimee_ice的博客
04-11 3836
定义 currentColor是CSS3中的变量，它表示“当前的标签所继承的文字颜色”。 !tips：“当前颜色” 指本体color , 如果没有设置color就找父元素,一级一级找,一直到根元素位置。 基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...
CSS3中currentColor关键字的妙用
09-24
主要介绍了CSS3中currentColor关键字的妙用,合理地使用currentColor往往会让CSS代码更加简洁,同时也能与SVG图标很好地结合使用,需要的朋友可以参考下
currentColor
weixin_38341556的博客
09-06 211
currentColor是css3中的新属性，它的意思是设置当前颜色值为当前文字的颜色，也就是currentColor的值==color属性的值
CSS关键词的值-currentColor关键字提示文字(当前颜色)
weixin_30756499的博客
04-28 219
currentColor关键字 currentColor关键字相当于一个CSS变量。 currentColor关键字与CSS变量也是有区别的： （1）他只可以能接受<color>值的地方使用。如果属性不接受<color>值,就不能接受currentColor值。 （2）不能用CSS变量的方法赋颜色值，currentColor值是根据当前原素的color属性值决定。相...
CSS currentColor 变量的使用
weixin_33769125的博客
12-07 109
CSS中存在一个神秘的变量，少有人知自然也不怎么为人所用。它就是crrentColor变量（或者说是CSS关键字，但我觉得称为变量好理解些）。 初识 它是何物？具有怎样的功效？它从哪里来？带着这些疑问我们继续。 下面是来自MDN的解释： currentColor代表了当前元素被应用上的color颜色值。 使用它可以将当前这个颜色值应用到其他属性上，或者嵌套元素的其他属性上。 你这可以这么理解...
CSS currentColor研究
whqet
02-12 4209
刚刚写了篇《CSS变量试玩儿》，我们了解到可以使用原生的CSS来定义使用变量，简化CSS书写、优化代码的组织与维护，但可怕的兼容性问题，又让我们望而却步、一笑了之。 但是有这么一个CSS变量currentColor，兼容良好、功能强大，接下来我们来一探究竟。简介CSS里已经有一个长期存在的兼容性良好的变量currentColor，表示对当前元素颜色的引用，可以应用在当前元素的其他属性和后代元素上。
涨知识了：css 偷懒技能——currentColor
sinat_33255495的博客
06-02 1628
currentColor 是 CSS3 中增加的一个颜色关键字，是 CSS 有史以来的第一个变量。 它借鉴自 SVG，这个关键字并没有绑定到一个固定的颜色值，而是解析为 color。有网友解释为：CSS里你可以在任何需要写颜色的地方使用currentColor这个变量，这个变量的值是当前元素的color值。如果当前元素没有在CSS里显示地指定一个color值，那它的颜色值就遵从CSS规则，从父级元素继承而来。它可以应用于元素的 color、background-color、border 等属性中，也可以作用
CSS中currentColor关键字的使用教程
09-25
在CSS中，`currentColor`是一个非常实用的关键字，它允许元素的某个属性（如边框、背景色、渐变等）继承当前元素的文字颜色。这个关键字在CSS3中被引入，为开发者提供了更灵活的颜色控制方式，特别是在处理图形和...
CSS currentColor 变量
banchi6453的博客
08-14 371
㈠currentColor定义及理解 来自MDN的解释：currentColor代表了当前元素被应用上的color颜色值。 使用它可以将当前这个颜色值应用到其他属性上，或者嵌套元素的其他属性上。 你这可以这么理解，CSS里你可以在任何需要写颜色的地方使用currentColor这个变量，这个变量的值是当前元素的color值。如果当前元素没有在CSS里显示地指定一个color值，...
currentColor-CSS3非常有用的变量
weixin_30642305的博客
09-21 905
一、currentColor-简介 currentColor顾名思意就是“当前颜色”，准确讲应该是“当前的文字颜色”，例如： .xxx { border: 1px solid currentColor; } 二、currentColor的使用与表现 上面提到，currentColor表示“当前的标签所继承的文字颜色”。可能一下子蒙圈了，还是上代码的好，CSS代码如下： ...
用currentColor做主题色
wurichengn的博客
06-27 870
该页面有HTML代码，进入原文查看更佳：http://www.evillcg.com/blog/item/1466997377/ 在去年的时候，学习前端开发的过程中遇到了一个名为currentColor的变量。 它可以用在所有需要填写颜色参数的地方，它的值代表的是当前标签对应的实时的color值。 其实刚遇到它的时候我是懵逼的。不过在慢慢的进步中渐渐的喜欢上了这个变量。 这次我们
[css] 你了解css3的currentColor吗？举例说明它的作用是什么？
歌谣的博客
02-14 528
[css] 你了解css3的currentColor吗？举例说明它的作用是什么？ currentColor是 color 属性的值，具体意思是指：currentColor关键字的使用值是 color 属性值的计算值。如果currentColor关键字被应用在 color 属性自身，则相当于是 color: inherit。 它的作用在我看来是指定默认color的值，比如 .active{ color:#C60; border:thin solid; } .active{ color:#C6
css属性之currentColor
weixin_30553777的博客
02-14 262
currentColor会使用已经存在的color的值 div { color: red; border: 5px solid currentColor; box-shadow: 0 0 5px solid currentColor; } currentColor会继承父元素的color body { color: red; } div { border: 5px solid cu...
fill:currentColor? iconfont为何要设置 vertical-align: -0.15em？
m0_64393334的博客
04-27 698
fill:currentColor? iconfont为何要设置 vertical-align: -0.15em？
svg图标加上fill=“currentColor“设置颜色时无效解决办法
最新发布
dekuyu blog
06-13 5106
有些 SVG 图像在定义中已经设置了 fill 属性，这可能会导致手动更改填充颜色无效。要解决这个问题，可以通过以下方法来移除 SVG 自带的 fill 填充属性。下图中的个人中心图标是在iconfont中下载的，可以看出改变fill属性颜色时其不受影响。可以用电脑自带写字板打开svg图标，或者用文本编辑器打开图标，收搜索fill，删除掉改行样式，保存。下面是修改成功后的结果，可以自行修改颜色。
将这段代码改为ts格式function changeColor() { currentColor++; if (currentColor >= colors.length) { currentColor = 0; } colorBtn.style.backgroundColor = colors[currentColor]; }
05-29
let currentColor: number = 0; const colorBtn: HTMLElement = document.getElementById("colorBtn"); function changeColor(): void { currentColor++; if (currentColor >= colors.length) { currentColor = ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值