【視頻教程】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站