CSS3中currentColor关键字的妙用


Posted in HTML / CSS onFebruary 27, 2016

初识

它是何物?具有怎样的功效?它从哪里来?带着这些疑问我们继续。

下面是来自MDN的解释:

currentColor代表了当前元素被应用上的color颜色值。 使用它可以将当前这个颜色值应用到其他属性上,或者嵌套元素的其他属性上。

你这可以这么理解,CSS里你可以在任何需要写颜色的地方使用currentColor这个变量,这个变量的值是当前元素的color值。如果当前元素没有在CSS里显示地指定一个color值,那它的颜色值就遵从CSS规则,从父级元素继承而来。

到此似乎解决了上面三个哲学式的提问,但依然有些模糊。程序员之间的交流,还是上码才好。

场景1

约么?

  
p{   
    color: red;   
}  

此时,

标签currentColor的值为red。

场景2

<div class="container">   
    <p>约么?</p>   
</div>   
.container{   
    color: #00ff00;   
}   
 

现在,我们没有给<p>标签指定颜色,它的color从父级容器也就是class为container的div继承而来,换句话说此时p标签的color为#00ff00,currentColor又是直接去取元素的color值,所以此时p标签的currentColor值也为#00ff00。

CSS3中currentColor关键字的妙用

场景3
如果父级元素也没有写color呢?其实这里都还是CSS规则的范畴,跟本文的主角关系不太大。

如果父级元素也没有指定颜色,那它的父级元素就会从父级的父级去继承,直到文档的根结点html标签都还没显示指定一个颜色呢,就应用上浏览器默认的颜色呗~

<!doctype html>  
<html>  
    <head>  
        <title>我来组成头部</title>  
    </head>  
    <body>  
        <p>约么?</p>  
    </body>  
    <footer>战神金钢,宇宙的保护神!</footer>  
</html>  
/**   
 * 无CSS   
 */  

CSS3中currentColor关键字的妙用

那,这个时候的黑色其实是浏览器默认给的。此时p标签的currentColor自然也跟color值一样,为黑色,纯黑的#000。

如何用?

了解它是怎样的物品后,下面问题来了,如何用?有额外的buff效果么,耗蓝多么,CD时间长么。。。

前面说道,它就是一个CSS变量,存储了颜色值,这个值来自当前元素的colorCSS属性。当你需要为该元素其他属性指定颜色的时候,它就可以登上舞台了。

<div class="container">   
    好好说话,有话好好说   
</div>   
.container{   
    color: #3CAADB;   
    border: 4px solid currentColor;   
}  

CSS3中currentColor关键字的妙用

这里我们第一次领略了currentColor的奇效。在指定边框颜色的时候,我们直接使用currentColor变量,而没有写一个传统的颜色值。

你似乎也知道了该如何用了。不只是border,其他能够使用颜色的地方,比如background,box-shadow等等。
与渐变混搭

你可能无法想象到的是,除了可以将currentColor用到普通需要颜色的场景,它同样可以被用在渐变中。

<div class="container">   
</div>   
.container{   
  height:200px;   
  color: #3CAADB;   
  background-image: linear-gradient(to rightright, #fff, currentColor 100%);   
}  

CSS3中currentColor关键字的妙用

甚至也可用于填充svg,下面会有相应示例。

currentColor 与SVG

我们可以使用 currentColor 来检测元素当前使用的颜色,因而不需要定义 color 很多次。
结合 SVG 图标使用时,currentColor 是很有用的,因为图标颜色的改变取决于它们的父元素。通常我们是这么做的:

.button {   
  color: black;   
}   
.button:hover {   
  color: red;   
}   
.button:active {   
  color: green;   
}   
  
.button svg {   
  fill: black;   
}   
.button:hover svg {   
  fill: red;   
}   
.button:active svg {   
  fill: green;   
}  

使用 currentColor 之后:

CSS Code复制内容到剪贴板
svg {     
  fill: currentColor;   
}   
  
.button {   
  color: black;   
  border: 1px solid currentColor;   
}   
.button:hover {   
  color: red;   
}   
.button:active {   
  color: green;   
}  

另一种方式是用于伪元素:

a {     
  color: #000;   
}   
a:hover {     
  color: #333;   
}   
a:active {     
  color: #666;   
}   
  
a:after,     
a:hover:after,     
a:active:after {     
  background: currentColor;   
  ...   
}  

 

HTML / CSS 相关文章推荐
利用CSS3实现炫酷的飞机起飞动画
Sep 17 HTML / CSS
利用CSS3的checked伪类实现OL的隐藏显示的方法
Dec 18 HTML / CSS
一款css实现的鼠标经过按钮的特效
Sep 11 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
Apr 26 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 HTML / CSS
input元素的url类型和email类型简介
Jul 11 HTML / CSS
HTML5实现简单图片上传所遇到的问题及解决办法
Jan 20 HTML / CSS
详解HTML5中rel属性的prefetch预加载功能使用
May 06 HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
Jun 16 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
Sep 12 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
Jul 16 HTML / CSS
六种css3实现的边框过渡效果
Apr 22 HTML / CSS
魔幻般冒泡背景的CSS3按钮动画
Feb 27 #HTML / CSS
CSS3 text-shadow实现文字阴影效果
Feb 24 #HTML / CSS
非常震撼的纯CSS3人物行走动画
Feb 24 #HTML / CSS
非常漂亮的CSS3百叶窗焦点图动画
Feb 24 #HTML / CSS
简单总结CSS3中视窗单位Viewport的常见用法
Feb 04 #HTML / CSS
CSS3+Sprite实现僵尸行走动画特效源码
Jan 27 #HTML / CSS
结合CSS3的布局新特征谈谈常见布局方法
Jan 22 #HTML / CSS
You might like
77A一级收信机修理记
2021/03/02 无线电
第七节 类的静态成员 [7]
2006/10/09 PHP
PHP批量生成缩略图的代码
2008/07/19 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
Js表格万条数据瞬间加载实现代码
2014/02/20 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
Node.js中创建和管理外部进程详解
2014/08/16 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
2015/03/04 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
微信小程序实现鼠标拖动效果示例
2017/12/01 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
[01:05:40]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第三场
2014/05/24 DOTA
Python Tkinter简单布局实例教程
2014/09/03 Python
python基于xml parse实现解析cdatasection数据
2014/09/30 Python
Python验证企业工商注册码
2015/10/25 Python
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
this关键字的含义
2015/04/08 面试题
会计大学生职业生涯规划书范文
2014/01/13 职场文书
竞选班委演讲稿
2014/04/28 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
python之django路由和视图案例教程
2021/07/26 Python
Python装饰器的练习题
2021/11/23 Python
Python中的 Set 与 dict
2022/03/13 Python