CSS3之currentColor详细讲解

作者: 提小莫 | 来源:发表于2017-10-11 18:48 被阅读24次

一、介绍

①CSS3的变量,继承当前元素color的颜色,如果当前元素的color未设定,则继承祖先元素的color值。

②来源于SVG,CSS3的变量,可以解决颜色属性无法继承的问题。

③不仅可以设置border,还可以设置outline-color,background,box-shadow、text-shadow等。

④样式便于维护,但是需注意那些地方需要用到这个变量,否则可能导致一变全变。

④因为是CSS3提出的,所以IE9以下不支持。

二、用法

①当前元素有color设定

html

<div>currentColor</div>

css

div{

font-size:16px;

color:#a95f44;

border:1px solid currentColor;

text-align:center;

}

效果

②当前元素无color设定,但父元素有设定color值

html

<div><p>currentColor</p></div>

css

div{  //父元素

font-size:16px;

color:#a95f44;

text-align:center;

}

p:nth-of-type(1){  //子元素

width: 200px;

border: 1px  solid currentColor;

box-shadow: 5px 5px 5px currentColor;

}

效果:

③父元素未设定color值,会寻找祖先元素直到有设定color的元素为止,如果没有,以浏览器默认颜色为准。

这个和父元素的类似,不做讲解了。

三、demo

①配合svg

.cont{

font-size:16px;

color:#000;

text-align:center;

padding-left:30px;

vertical-align:middle;

}

.cont:hover{

color:royalblue;

}

svg{

fill:currentColor;

}

效果:

是不是感觉节省了代码,而且代码好维护?

②配合背景渐变

.button{

padding:.3em .8em;

border:1px solid #ddd;

border-radius:.2em;

color:#fff;

background:#58a linear-gradient(hsla(0,0%,100%,.2),currentColor);

box-shadow:0 .05em.25emrgba(0,0,0,.5);

text-shadow:0-0.05em.05emrgba(0,0,0,.5);

font-size:125%; /*假设父元素为16px;*/

line-height:1.5;

}

效果

到这里,这个变量就说完了!


如果喜欢,不要吝啬你的爱心“❤”哦!

相关文章

  • CSS3之currentColor详细讲解

    一、介绍 ①CSS3的变量,继承当前元素color的颜色,如果当前元素的color未设定,则继承祖先元素的colo...

  • currentColor-真正大隐于市者

    currentColor 当前文字颜色(变量) 例如: 就是这么一个长得很不和谐的单词就是CSS3中一个标准且重要...

  • currentColor

    currentColor 当前文字颜色 例子

  • CSS知识点杂记

    1.currentColor currentColor是一个变量,该变量的值会被解析为color的值 2.inhe...

  • 引言、CSS编码技巧

    1、currentColor currentColor是一个表示颜色的关键字,它表示获取当前层级文本的颜色,若没有...

  • Python制作疫情地图--第三弹 绘制地图

    Python制作疫情地图 详细讲解视频地址——详细视频讲解 pyecharts 中文文档pyecharts-map...

  • CSS3 复选框动画特效

    这篇文章中所讲解到的内容和上一篇内容类似,所以在这里不再对具体细节进行详细介绍,不了解的地方可以参照 CSS3 单...

  • 2018-07-12

    MJRefresh超详细讲解

  • golang 之 defer

    defer的详细讲解

  • cookie详细讲解

    cookie是如何工作的 图中响应头中带有的设置的cookie字段,请求头带有cookie字。请求头中带给后台是浏...

网友评论

    本文标题:CSS3之currentColor详细讲解

    本文链接:https://www.haomeiwen.com/subject/artwyxtx.html