免費(fèi)AI編程助手
必須了解的CSS函數(shù)
2018-06-19 18:28 更新
隨著技術(shù)的不斷更新，樣式表語言越來越強(qiáng)大，能實(shí)現(xiàn)的功能也是比我們預(yù)料的多得多，甚至許多以前只能依靠JavaScript才能實(shí)現(xiàn)的功能，現(xiàn)在我們僅僅使用css就可以實(shí)現(xiàn)。在這篇文章中，我們就一起來學(xué)習(xí)一下一些有用的css函數(shù)。
一、attr()
說明：
在CSS2.1中attr()總是返回一個(gè)字符串。在CSS3中attr()可以返回多種不同的類型。
簡單實(shí)例：Tooltip
.tooltip:after{
content:attr(data-tooltip);
}
<div class="tooltip" data-tooltip="提示" data-direction="down">down</div>
二、calc()
在css中，calc()可以說是一個(gè)計(jì)算器，我們可以在里面運(yùn)行我們的計(jì)算表達(dá)式。
語法：
.element {
width: calc(expression);
}
expression就是一個(gè)表達(dá)式。
運(yùn)算規(guī)則：
- 使用“+”、“-”、“*” 和 “/”四則運(yùn)算；
- 可以使用百分比、px、em、rem等單位；
- 表達(dá)式中有“+”和“-”時(shí)，其前后必須要有空格，否則會(huì)被視為無效；
- 表達(dá)式中有“*”和“/”時(shí)，其前后可以沒有空格，但建議留有空格。
在上面的"tooltip"例子中，我就使用了calc()來定位tip的位置，例如：down按鈕
[data-direction="down"]:before{
top:-webkit-calc(100% - 5px);
top:-moz-calc(100% - 5px);
top:calc(100% - 5px);
border-bottom-color:#383838;
}
[data-direction="down"]:after{
top:-webkit-calc(100% + 5px);
top:-moz-calc(100% + 5px);
top:calc(100% + 5px);
}
三、filter()
在css中，filter()就是專門用來做各種濾鏡的。
關(guān)于filter()的更多介紹，可以看《CSS3濾鏡》
四、linear-gradient() 與 radial-gradient()
linear-gradient(線性漸變)和radial-gradient(徑向漸變)。
更多：《CSS3 Gradient》
總結(jié)
合理的使用css函數(shù)，能幫助你創(chuàng)作出許多意想不到的效果。
以上內(nèi)容是否對您有幫助：
更多建議：