你應(yīng)該知道的4個(gè)有用的CSS函數(shù)
英文 |?https://medium.com/javascript-in-plain-english/4-useful-css-functions-that-you-should-know-f0b191849202
翻譯 | web前端開(kāi)發(fā)（ID：web_qdkf)
介紹
像任何其他語(yǔ)言一樣，CSS也有自己的功能?？梢詫⑺鼈儾迦肽阋胖弥档奈恢?，或者在某些情況下，將其插入另一個(gè)值聲明。一些CSS函數(shù)甚至允許你將其他函數(shù)嵌套在其中。
在本文中，我們將學(xué)習(xí)一些你應(yīng)該知道的驚人CSS功能。那讓我們開(kāi)始吧。
1、CSS attr函數(shù)
該函數(shù)attr()返回所選元素的屬性值。它使我們可以進(jìn)入HTML，獲取屬性的內(nèi)容，并將其提供給CSS content屬性。
看下面的例子：
/* */div:after {content: attr(data-example);}
下面的示例將Medium在頁(yè)面上顯示屬性。你可以在網(wǎng)頁(yè)上嘗試。
Codepen示例地址：https://codepen.io/MehdiAoussiad/pen/wvzBQwb
2、calc函數(shù)
該函數(shù)calc()允許您執(zhí)行計(jì)算以確定CSS屬性值。所有主要瀏覽器都支持它。
這個(gè)函數(shù)有兩個(gè)參數(shù)和來(lái)自操作者的計(jì)算結(jié)果（+，-，*，/）你提供它，具有或不具有伴隨的單元中提供的那些參數(shù)是數(shù)字。
這是一個(gè)例子：
.element {width：calc（100vw-80px） ; }使用函數(shù)計(jì)算div元素的寬度calc()。
Codepen示例地址：https://codepen.io/MehdiAoussiad/pen/RwGNqPe
3、var函數(shù)
該函數(shù)var()?用于插入CSS變量的值。這對(duì)于創(chuàng)建一些CSS變量以在我們的代碼中的許多地方使用它們很有用。
看下面的例子：
:root {--main-bg-color: coral;--main-txt-color: blue;--main-padding: 15px;}#div1 {background-color: var(--main-bg-color);color: var(--main-txt-color);padding: var(--main-padding);}#div2 {background-color: var(--main-bg-color);color: var(--main-txt-color);padding: var(--main-padding);}
如上所示，我們?cè)趓oot元素中創(chuàng)建了值，然后使用function在div元素中使用了它們var()。
4、過(guò)濾功能
該功能filter()將圖形更改應(yīng)用于輸入圖像和元素的外觀。是我們可以實(shí)現(xiàn)的效果如下：（ ，blur，brightness，contrast，grayscale，hue-rotate，opacity，invert，sepia，）。saturate drop-shadow我認(rèn)為，如果我沒(méi)記錯(cuò)的話，還有更多。
這是一個(gè)例子：
.element1 {filter: drop-shadow(0.25rem 0 0.75rem #ef9035);}// Or:.element2 {filter: blur(20px);}
Codepen示例地址：https://codepen.io/MehdiAoussiad/pen/JjRoeEL
結(jié)論
如你所見(jiàn)，CSS中的函數(shù)非常有用且重要。你可能熟悉一些CSS函數(shù)，但是CSS的強(qiáng)大會(huì)讓你感到非常驚訝。你需要學(xué)習(xí)更多有用的CSS功能。
感謝你閱讀本文，希望你覺(jué)得它對(duì)你有用。
