【视频教程】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站