CSS3中currentColor關鍵字的妙用

初識
它是何物?具有怎樣的功效?它從哪里來?帶著這些疑問我們繼續(xù)。
下面是來自MDN的解釋:
currentColor代表了當前元素被應用上的color顏色值。 使用它可以將當前這個顏色值應用到其他屬性上,或者嵌套元素的其他屬性上。
你這可以這么理解,CSS里你可以在任何需要寫顏色的地方使用currentColor這個變量,這個變量的值是當前元素的color值。如果當前元素沒有在CSS里顯示地指定一個color值,那它的顏色值就遵從CSS規(guī)則,從父級元素繼承而來。
到此似乎解決了上面三個哲學式的提問,但依然有些模糊。程序員之間的交流,還是上碼才好。
場景1
- <p>約么?</p>
- p{
- color: red;
- }
此時,<p>標簽currentColor的值為red。
場景2
- <div class="container">
- <p>約么?</p>
- </div>
- .container{
- color: #00ff00;
- }
現(xiàn)在,我們沒有給<p>標簽指定顏色,它的color從父級容器也就是class為container的div繼承而來,換句話說此時p標簽的color為#00ff00,currentColor又是直接去取元素的color值,所以此時p標簽的currentColor值也為#00ff00。
場景3
如果父級元素也沒有寫color呢?其實這里都還是CSS規(guī)則的范疇,跟本文的主角關系不太大。但本著不啰嗦會死的原則,就展開了講。
如果父級元素也沒有指定顏色,那它的父級元素就會從父級的父級去繼承,直到文檔的根結點html標簽都還沒顯示指定一個顏色呢,就應用上瀏覽器默認的顏色唄~
- <!doctype html>
- <html>
- <head>
- <title>我來組成頭部</title>
- </head>
- <body>
- <p>約么?</p>
- </body>
- <footer>戰(zhàn)神金鋼,宇宙的保護神!</footer>
- </html>
- /**
- * 無CSS
- */
那,這個時候的黑色其實是瀏覽器默認給的。此時p標簽的currentColor自然也跟color值一樣,為黑色,純黑的#000。
如何用?
了解它是怎樣的物品后,下面問題來了,如何用?有額外的buff效果么,耗藍多么,CD時間長么。。。
前面說道,它就是一個CSS變量,存儲了顏色值,這個值來自當前元素的colorCSS屬性。當你需要為該元素其他屬性指定顏色的時候,它就可以登上舞臺了。
- <div class="container">
- 好好說話,有話好好說
- </div>
- .container{
- color: #3CAADB;
- border: 4px solid currentColor;
- }
這里我們第一次領略了currentColor的奇效。在指定邊框顏色的時候,我們直接使用currentColor變量,而沒有寫一個傳統(tǒng)的顏色值。
你似乎也知道了該如何用了。不只是border,其他能夠使用顏色的地方,比如background,box-shadow等等。
與漸變混搭
你可能無法想象到的是,除了可以將currentColor用到普通需要顏色的場景,它同樣可以被用在漸變中。
- <div class="container">
- </div>
- .container{
- height:200px;
- color: #3CAADB;
- background-image: linear-gradient(to rightright, #fff, currentColor 100%);
- }
甚至也可用于填充svg,下面會有相應示例。
currentColor 與SVG
我們可以使用 currentColor 來檢測元素當前使用的顏色,因而不需要定義 color 很多次。
結合 SVG 圖標使用時,currentColor 是很有用的,因為圖標顏色的改變取決于它們的父元素。通常我們是這么做的:
- .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 之后:
- svg {
- fill: currentColor;
- }
- .button {
- color: black;
- border: 1px solid currentColor;
- }
- .button:hover {
- color: red;
- }
- .button:active {
- color: green;
- }
另一種方式是用于偽元素:
- a {
- color: #000;
- }
- a:hover {
- color: #333;
- }
- a:active {
- color: #666;
- }
- a:after,
- a:hover:after,
- a:active:after {
- background: currentColor;
- ...
- }
相關文章
- CSS3中在rgb顏色的基礎上又有了透明度的設置功能成為rgba屬性,除此之外下面還會講到CSS3新增的hsl及hsla顏色的用法,下面就來看一下CSS3中各種顏色屬性的使用教程2016-05-17
CSS實現(xiàn)大小相同、顏色深淺不一的粒子旋轉加載動畫
這篇文章主要介紹了CSS實現(xiàn)大小相同、顏色深淺不一的粒子旋轉加載動畫的相關代碼,運用CSS3的border-radius圓角屬性、box-shadow陰影屬性等屬性制作出來的,感興趣的小伙伴2016-04-25- 這篇文章主要介紹了使用CSS3的::selection改變選中文本顏色的方法,也就是說可以將默認的藍色底色改為其他顏色,really cool,需要的朋友可以參考下2015-09-29
css實現(xiàn)兼容火狐、IE的LI奇偶行顏色交替方法
這篇文章主要為大家介紹了css實現(xiàn)兼容火狐、IE的LI奇偶行顏色交替方法,通過css屬性控制設置LI各行變色效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-28- 這篇文章主要介紹了CSS中對RGB顏色的使用詳解,是CSS入門學習中的基礎知識,需要的朋友可以參考下2015-08-04
- 這篇文章主要介紹了CSS3中顏色線性漸變實戰(zhàn),示例中展示了代碼設置不同漸變方向的效果,需要的朋友可以參考下2015-07-18
使用CSS3的背景漸變Text Gradient 創(chuàng)建文字顏色漸變
使用CSS3 的背景漸變 -webkit-gradient ,用一個背景漸變的 DIV 代替圖片。下面是實現(xiàn)效果示例,相比以上方案優(yōu)點是不使用圖片,減小請求量和流量2014-08-19- 這是一款很漂亮的CSS3動畫進度條,可以用它來顯示每一項數(shù)據(jù)的所占的比例,效果很不錯2014-06-17
采用CSS3實現(xiàn)的表面顏色可漸變3D立方體動畫特效源碼
這是一款視覺效果超炫的采用CSS3實現(xiàn)的3D立方體動畫,與以往的立方體動畫效果不同的是,這款CSS3立方體動畫的幾個表面的背景顏色都有漸變的動畫效果,并且會伴隨著立方體的2014-06-17- 一款相對簡易的純CSS3 3D按鈕,可以自己配置背景顏色2014-06-11