首页 > 开发 > CSS > 正文

CSS中currentColor关键字的使用教程

2024-07-11 08:30:05
字体:
来源:转载
供稿:网友

一、currentColor-真正大隐于市者

实际上,之前“SVG图标颜色文字般继承与填充”一文就简单介绍过currentColor, 后来有同事问此关键字,说没见过。我意识到,应该好好大家宣扬currentColor一番。

currentColor顾名思意就是“当前颜色”,准确讲应该是“当前的文字颜色”,例如:

CSS Code复制内容到剪贴板
  1. .xxx { border: 1px solid currentColor; }   

没错!再说一遍,没错!就是这么一个长得很不和谐的单词就是CSS3中一个标准且重要且强大的关键字。

什么?你没见过!!孤陋寡闻了吧~~过来~~来嘛~~只告诉你一个人哦,鄙人其实……已经使用有一段时日了,超赞的!

没事没事,别慌,现在开始认识还来得急,也会让你爽滴!
二、currentColor的使用与表现

上面提到,currentColor表示“当前的标签所继承的文字颜色”。可能还有小伙伴一时半会没消化过来,炒两个简单板栗助消化,CSS代码如下:

CSS Code复制内容到剪贴板
  1. img[src$='mm1.jpg'] { border: 1em solid currentColor; }  

于是,如果御用妹子直接暴露在本文中,妹子边框颜色就会是文章默认文字颜色,如下这样子:
2015520164352568.jpg (256×191)

我的鑫空间<pre>标签文字颜色是蓝色(pre { color: blue; }),于是,我把御用妹子放在<pre>标签中,则边框则是蓝色,如下:
2015520164542710.jpg (276×209)

注意:由于是CSS3新增关键字,需要IE9+以及其他现代浏览器才有效果。

换种方式表示就是:currentColor = color的值

用图示意是:
2015520164703661.png (315×313)

任意替换性
凡事需要使用颜色值的地方,都可以使用currentColor替换,比方说背景色 – background-color, 渐变色 – gradient, 盒阴影 – box-shadow, SVG的填充色 – fill等等。很灵活,很好用!

下面问题来了,我要让图片边框蓝色,直接:

CSS Code复制内容到剪贴板
  1. border: 1em solid blue;  

不就好了,还要费尽周折弄个currentColor搞摩斯(武汉话,’干嘛’意思)啊?这活生生多了好多字节的大小啊!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表