欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS3中currentColor關鍵字的妙用

cnblogs   發(fā)布時間：2016-02-27 11:25:15   作者：劉哇勇   我要評論
這篇文章主要介紹了CSS3中currentColor關鍵字的妙用,合理地使用currentColor往往會讓CSS代碼更加簡潔,同時也能與SVG圖標很好地結合使用,需要的朋友可以參考下

初識

它是何物？具有怎樣的功效？它從哪里來？帶著這些疑問我們繼續(xù)。

下面是來自MDN的解釋：

currentColor代表了當前元素被應用上的color顏色值。 使用它可以將當前這個顏色值應用到其他屬性上，或者嵌套元素的其他屬性上。

你這可以這么理解，CSS里你可以在任何需要寫顏色的地方使用currentColor這個變量，這個變量的值是當前元素的color值。如果當前元素沒有在CSS里顯示地指定一個color值，那它的顏色值就遵從CSS規(guī)則，從父級元素繼承而來。

到此似乎解決了上面三個哲學式的提問，但依然有些模糊。程序員之間的交流，還是上碼才好。

場景1

CSS Code復制內容到剪貼板
  1. <p>約么？</p>   
  2. p{   
  3.     color: red;   
  4. }  

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

場景2

CSS Code復制內容到剪貼板
  1. <div class="container">   
  2.     <p>約么？</p>   
  3. </div>   
  4. .container{   
  5.     color: #00ff00;   
  6. }   

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

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

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

XML/HTML Code復制內容到剪貼板
  1. <!doctype html>  
  2. <html>  
  3.     <head>  
  4.         <title>我來組成頭部</title>  
  5.     </head>  
  6.     <body>  
  7.         <p>約么？</p>  
  8.     </body>  
  9.     <footer>戰(zhàn)神金鋼，宇宙的保護神！</footer>  
  10. </html>  
  11. /**   
  12.  * 無CSS   
  13.  */  

2016227111740673.jpg (759×247)

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

如何用？

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

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

CSS Code復制內容到剪貼板
  1. <div class="container">   
  2.     好好說話，有話好好說   
  3. </div>   
  4. .container{   
  5.     color: #3CAADB;   
  6.     border: 4px solid currentColor;   
  7. }  

2016227111807718.png (1063×50)

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

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

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

CSS Code復制內容到剪貼板
  1. <div class="container">   
  2. </div>   
  3. .container{   
  4.   height:200px;   
  5.   color: #3CAADB;   
  6.   background-image: linear-gradient(to rightright, #fff, currentColor 100%);   
  7. }  

2016227111918197.png (1023×188)

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

currentColor 與SVG

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

CSS Code復制內容到剪貼板
  1. .button {   
  2.   color: black;   
  3. }   
  4. .button:hover {   
  5.   color: red;   
  6. }   
  7. .button:active {   
  8.   color: green;   
  9. }   
  10.   
  11. .button svg {   
  12.   fill: black;   
  13. }   
  14. .button:hover svg {   
  15.   fill: red;   
  16. }   
  17. .button:active svg {   
  18.   fill: green;   
  19. }  

使用 currentColor 之后：

CSS Code復制內容到剪貼板
  1. svg {     
  2.   fill: currentColor;   
  3. }   
  4.   
  5. .button {   
  6.   color: black;   
  7.   border: 1px solid currentColor;   
  8. }   
  9. .button:hover {   
  10.   color: red;   
  11. }   
  12. .button:active {   
  13.   color: green;   
  14. }  

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

CSS Code復制內容到剪貼板
  1. a {     
  2.   color: #000;   
  3. }   
  4. a:hover {     
  5.   color: #333;   
  6. }   
  7. a:active {     
  8.   color: #666;   
  9. }   
  10.   
  11. a:after,     
  12. a:hover:after,     
  13. a:active:after {     
  14.   background: currentColor;   
  15.   ...   
  16. }  

相關文章

最新評論