视频教程-currentColor-实例可在文末下载。CSS3居然有变量!!!Notsassorless来自MDN的解释currentColor代表Thecolorvaluetoapplytothecurrentelement。使用它将当前颜色值应用到其他属性,或应用到嵌套元素的其他属性。解释一下上面的意思,在CSS中,任何需要写颜色的地方都可以使用变量currentColor,这个变量的值就是当前元素的颜色值。如果当前元素没有在CSS中指定颜色值,则其颜色值遵循CSS规则,继承自父元素。进一步理解currentColor取当前标签/元素的颜色属性。如果color没有指定属性值,则默认为color:inherit。继承就是继承父元素的属性值,元素继承是css的一个规则。哪些css属性可以使用currentColor?背景(背景).currentColor{color:red;}.currentColor.background{background:currentColor;}border(边框).currentColor{color:red;}.currentColor.border{border:1pxsolidcurrentColor}阴影(box-shadow...*兼容chromebackground-image:linear-gradient(currentColor,#fff);}svg(fill).currentColor{color:red;}.currentColor.svg{fill:currentColor}currentColor的应用和好处用鼠标切换multiplestates:focuscurrentColor(blue):hovercurrentColor(red):activecurrentColor(green)代码维护方便currentColor目前主流浏览器(IE8+)都支持,也很好理解,也很好用。但目前它的应用人群非常少。主要原因是代码编写习惯。在css2.0时代,没有变量这种东西。并且有很多方法可以实现currentColor类测试。还有,如果要用变量来开发css的话,选择lesssass会比较方便。多种颜色主题DOM列表,无需lesssass开发,大量需要多种颜色切换的需求。currentColor是一个很好的选择。最后附上两个例子(百度云下载链接下载)svg优惠券例子关于我们原创的高清视频和例子下载视频讲解和例子下载-提取码:3rsqQQ问答交流群:600633658我们的链接:知乎掘金今日头条新浪微博前端网思府简书B站
