閱讀(6.1k) 書簽贊(1) 我要糾錯(cuò)

必須了解的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()就是專門用來做各種濾鏡的。