CSS3中currentColor關鍵字如何使用

發(fā)布時間：2021-07-23 15:53:45 來源：億速云閱讀：144 作者：Leah 欄目：web開發(fā)

本篇文章為大家展示了CSS3中currentColor關鍵字如何使用，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

場景1

CSS Code復制內(nèi)容到剪貼板

<p>約么？</p>
p{
color: red;
}

此時，<p>標簽currentColor的值為red。

場景2

CSS Code復制內(nèi)容到剪貼板

<div class="container">
<p>約么？</p>
</div>
.container{
color: #00ff00;
}

現(xiàn)在，我們沒有給<p>標簽指定顏色，它的color從父級容器也就是class為container的div繼承而來，換句話說此時p標簽的color為#00ff00，currentColor又是直接去取元素的color值，所以此時p標簽的currentColor值也為#00ff00。
CSS3中currentColor關鍵字如何使用

場景3
如果父級元素也沒有寫color呢？其實這里都還是CSS規(guī)則的范疇，跟本文的主角關系不太大。但本著不啰嗦會死的原則，就展開了講。

如果父級元素也沒有指定顏色，那它的父級元素就會從父級的父級去繼承，直到文檔的根結點html標簽都還沒顯示指定一個顏色呢，就應用上瀏覽器默認的顏色唄~

XML/HTML Code復制內(nèi)容到剪貼板

<!doctype html>
<html>
<head>
<title>我來組成頭部</title>
</head>
<body>
<p>約么？</p>
</body>
<footer>戰(zhàn)神金鋼，宇宙的保護神！</footer>
</html>
/**
* 無CSS
*/

CSS3中currentColor關鍵字如何使用

那，這個時候的黑色其實是瀏覽器默認給的。此時p標簽的currentColor自然也跟color值一樣，為黑色，純黑的#000。

如何用？

了解它是怎樣的物品后，下面問題來了，如何用？有額外的buff效果么，耗藍多么，CD時間長么。。。

前面說道，它就是一個CSS變量，存儲了顏色值，這個值來自當前元素的colorCSS屬性。當你需要為該元素其他屬性指定顏色的時候，它就可以登上舞臺了。

CSS Code復制內(nèi)容到剪貼板

<div class="container">
好好說話，有話好好說
</div>
.container{
color: #3CAADB;
border: 4px solid currentColor;
}

CSS3中currentColor關鍵字如何使用

這里我們第一次領略了currentColor的奇效。在指定邊框顏色的時候，我們直接使用currentColor變量，而沒有寫一個傳統(tǒng)的顏色值。

你似乎也知道了該如何用了。不只是border，其他能夠使用顏色的地方，比如background，box-shadow等等。
與漸變混搭

你可能無法想象到的是，除了可以將currentColor用到普通需要顏色的場景，它同樣可以被用在漸變中。

CSS Code復制內(nèi)容到剪貼板

<div class="container">
</div>
.container{
height:200px;
color: #3CAADB;
background-image: linear-gradient(to rightright, #fff, currentColor 100%);
}

CSS3中currentColor關鍵字如何使用

甚至也可用于填充svg，下面會有相應示例。

currentColor 與SVG

我們可以使用 currentColor 來檢測元素當前使用的顏色，因而不需要定義 color 很多次。
結合 SVG 圖標使用時，currentColor 是很有用的，因為圖標顏色的改變?nèi)Q于它們的父元素。通常我們是這么做的：

CSS Code復制內(nèi)容到剪貼板

.button {
color: black;
}
.button:hover {
color: red;
}
.button:active {
color: green;
}
.button svg {
fill: black;
}
.button:hover svg {
fill: red;
}
.button:active svg {
fill: green;
}

使用 currentColor 之后：

CSS Code復制內(nèi)容到剪貼板

svg {
fill: currentColor;
}
.button {
color: black;
border: 1px solid currentColor;
}
.button:hover {
color: red;
}
.button:active {
color: green;
}

另一種方式是用于偽元素：

CSS Code復制內(nèi)容到剪貼板

a {
color: #000;
}
a:hover {
color: #333;
}
a:active {
color: #666;
}
a:after,
a:hover:after,
a:active:after {
background: currentColor;
...
}

上述內(nèi)容就是CSS3中currentColor關鍵字如何使用，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

CSS3中currentColor關鍵字如何使用

猜你喜歡

最新資訊

相關推薦

相關標簽