CSS中currentColor关键词的使用教程

2019-09-07 郑州网站建设  

一、currentColor-真正大隐于市者

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

currentColor顾名思意就是“当前色彩”,准确讲需要是“当前的文字色彩”,例如:

CSS Code复制内容到剪贴板

.xxx { border1px solid currentColor; }   

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

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

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

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

CSS Code复制内容到剪贴板

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复制内容到剪贴板

border: 1em solid blue;  

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

这个想法其实短见了,当我们应用一些CSS高级技能,尤其CSS3图形技术的时候,你会发现,currentColor就是雾霾天气下的强劲冷空气,带来无比的清爽与洁净,下面一章节的栗子大家不妨好好感受下!
三、 currentColor的实战表演秀

实战1:背景色镂空技术
去年介绍过“CSS背景色镂空技术”,可以方便控制图标的色彩,很赞的想法。此新闻对应demo可以轻戳这里访问。

这种设计的目的就是鼠标hover时候,图标可以跟着文字一起变色。如果不考虑兼容性问题,我们可以稍稍改造下,使其实现更加简单:

CSS Code复制内容到剪贴板

.icon {   

    displayinline-block;   

    width16pxheight20px;   

    background-imageurl(../201307/sprite_icons.png);   

    background-color: currentColor; /* 该色彩控制图标的色彩 */  

}  

于是,我们想要鼠标hover文字链接,其图标色彩要跟着一起变化,只要改变文字色彩就可以了:

CSS Code复制内容到剪贴板

.link:hover { color#333; }/* 虽然改变的是文字色彩,但是图标色彩也一起变化了 */  

HTML结构如下:

XML/HTML Code复制内容到剪贴板


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1120.html转载请标明出处,谢谢合作!
标签:

  • CSScurrentCo
  • currentCol