【视频教程】CSS妙用之currentColor-冰山工作室-沙翼-web前端

视频教程-currentColor-示例可在文章末下载

css3 居然有变量 !!! 不是sass or less

来自MDN的解释

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

• 解释上面的意思，在CSS里你可以在任何需要写颜色的地方使用currentColor这个变量，这个变量的值是当前元素的color值。如果当前元素没有在CSS里指定一个color值，那它的颜色值就遵从CSS规则，从父级元素继承而来。
• 再深入理解 currentColor 取当前所在标签/元素color属性，color如果没有指定属性值，那默认取 color:inherit。
• inherit是继承父元素的属性值，而元素继承是css的一种规则。

哪些css属性可以用currentColor？

背景(background)

.currentColor{
  color:red;
}
.currentColor .background{
  background:currentColor;
}

边框(border)

.currentColor{
  color:red;
}
.currentColor .border{
  border:1px solid currentColor
}

阴影(box-shadow)

.currentColor{
    color:red;
}
.currentColor .boxShadow{
    box-shadow: 5px 5px 10px currentColor;
}

渐变(linear-gradient)

.currentColor{
    color:red;
}
.currentColor .linearGradient{
    background-color: currentColor; *兼容chrome
    background-image: linear-gradient(currentColor, #fff);
}

svg(fill)

.currentColor{
    color:red;
}
.currentColor .svg{
    fill:currentColor
}

currentColor应用与好处

利用鼠标在多种状态下切换

• :focus currentColor(blue)
• :hover currentColor(red)
• :active currentColor(green)

代码维护方便

currentColor 目前主流浏览器都支持(IE8+)，它也很好的理解，应用简单。但是目前它的应用人群非常少。
主要原因是代码书写习惯，css在2.0的时代是没有变量这个东西的。而且能实现currentColor类试的方法有很多。还有如果想用变量开发css，都会选择less sass会方便。

多个颜色主题DOM列表

所以在不需要less sass开发，需要大量的多种颜色切换的需求。currentColor是非常好的选择。

最后附上两个例子（百度云下载链接下载）

svg

优惠卷例子

关于我们

原始高清视频及示例下载

视频讲解及示例下载-提取码：3rsq

QQ答疑交流群:

600633658

我们的链接：

知乎 掘金 今日头条 新浪微博 前端网 思否 简书 B站