CSS3中currentColor关键字的妙用
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
初识
它是何物?具有怎样的功效?它从哪里来?带着这些疑问我们继续。
下面是来自MDN的解释:
currentColor代表了当前元素被应用上的color颜色值。 使用它可以将当前这个颜色值应用到其他属性上,或者嵌套元素的其他属性上。
你这可以这么理解,CSS里你可以在任何需要写颜色的地方使用currentColor这个变量,这个变量的值是当前元素的color值。如果当前元素没有在CSS里显示地指定一个color值,那它的颜色值就遵从CSS规则,从父级元素继承而来。
到此似乎解决了上面三个哲学式的提问,但依然有些模糊。程序员之间的交流,还是上码才好。
场景1
- <p>约么?</p>
- p{
- color: red;
- }
此时,<p>标签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。
场景3
如果父级元素也没有写color呢?其实这里都还是CSS规则的范畴,跟本文的主角关系不太大。但本着不啰嗦会死的原则,就展开了讲。
如果父级元素也没有指定颜色,那它的父级元素就会从父级的父级去继承,直到文档的根结点html标签都还没显示指定一个颜色呢,就应用上浏览器默认的颜色呗~
- <!doctype html>
- <html>
- <head>
- <title>我来组成头部</title>
- </head>
- <body>
- <p>约么?</p>
- </body>
- <footer>战神金钢,宇宙的保护神!</footer>
- </html>
- /**
- * 无CSS
- */
那,这个时候的黑色其实是浏览器默认给的。此时p标签的currentColor自然也跟color值一样,为黑色,纯黑的#000。
如何用?
了解它是怎样的物品后,下面问题来了,如何用?有额外的buff效果么,耗蓝多么,CD时间长么。。。
前面说道,它就是一个CSS变量,存储了颜色值,这个值来自当前元素的colorCSS属性。当你需要为该元素其他属性指定颜色的时候,它就可以登上舞台了。
- <div class="container">
- 好好说话,有话好好说
- </div>
- .container{
- color: #3CAADB;
- border: 4px solid 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%);
- }
甚至也可用于填充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 之后:
- 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;
- ...
- }
相关文章
- CSS3中在rgb颜色的基础上又有了透明度的设置功能成为rgba属性,除此之外下面还会讲到CSS3新增的hsl及hsla颜色的用法,下面就来看一下CSS3中各种颜色属性的使用教程2016-05-17
- 这篇文章主要介绍了CSS实现大小相同、颜色深浅不一的粒子旋转加载动画的相关代码,运用CSS3的border-radius圆角属性、box-shadow阴影属性等属性制作出来的,感兴趣的小伙伴2016-04-25
- 这篇文章主要介绍了使用CSS3的::selection改变选中文本颜色的方法,也就是说可以将默认的蓝色底色改为其他颜色,really cool,需要的朋友可以参考下2015-09-29
- 这篇文章主要为大家介绍了css实现兼容火狐、IE的LI奇偶行颜色交替方法,通过css属性控制设置LI各行变色效果,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-28
- 这篇文章主要介绍了CSS中对RGB颜色的使用详解,是CSS入门学习中的基础知识,需要的朋友可以参考下2015-08-04
- 这篇文章主要介绍了CSS3中颜色线性渐变实战,示例中展示了代码设置不同渐变方向的效果,需要的朋友可以参考下2015-07-18
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
使用CSS3 的背景渐变 -webkit-gradient ,用一个背景渐变的 DIV 代替图片。下面是实现效果示例,相比以上方案优点是不使用图片,减小请求量和流量2014-08-19- 这是一款很漂亮的CSS3动画进度条,可以用它来显示每一项数据的所占的比例,效果很不错2014-06-17
- 这是一款视觉效果超炫的采用CSS3实现的3D立方体动画,与以往的立方体动画效果不同的是,这款CSS3立方体动画的几个表面的背景颜色都有渐变的动画效果,并且会伴随着立方体的2014-06-17
- 一款相对简易的纯CSS3 3D按钮,可以自己配置背景颜色2014-06-11
最新评论