之前一直以為css沒有幾個函數(shù)，今天才發(fā)現(xiàn)css現(xiàn)在竟然已經(jīng)有86個函數(shù)了，意不意外，驚不驚喜！我一直比較喜歡用css來解決之前js實現(xiàn)的效果，這樣對性能時一種優(yōu)化，自己也有成就感，希望這些函數(shù)能夠更多的應(yīng)用到自己的項目中！根據(jù)w3cplus中可以劃分為以下幾類：

一、屬性函數(shù)

attr() 返回所選元素的屬性值

二、背景圖片函數(shù)：

linear-gradient()：將線性漸變設(shè)置為背景圖像。定義至少兩種顏色（從上到下）

radial-gradient()：將徑向漸變設(shè)置為背景圖像。定義至少兩種顏色（從中心到邊緣）

conic-gradient()：錐形漸變

repeating-linear-gradient()：重復(fù)線性漸變

repeating-radial-gradient()：重復(fù)徑向漸變

repeating-conic-gradient()：重復(fù)錐形漸變

image-set()：可以根據(jù)用戶設(shè)備的分辨率匹配合適的圖像

image()：指定圖像或者圖像替代，與url()功能類似，比url增加了一些功能

url()：使用URL來加載外部資源

element()：以將元素當(dāng)作圖片渲染

三、顏色函數(shù)：

rgb()：使用紅(R)、綠(G)、藍(B)三個顏色的疊加來生成各式各樣的顏色

rgba()：使用紅(R)、綠(G)、藍(B)、透明度(A)的疊加來生成各式各樣的顏色

hsl()：使用色相-飽和度-亮度模型（HSL）定義顏色

hsla()：使用色相、飽和度、亮度、透明度來定義顏色

hwb()：允許通過指定顏色的色調(diào)、白度和黑度分量以及alpha值來指定顏色值

color-mod()：等價于color(#29B4F0 a() s() h() l() tint() shade() w() b() contrast());

四、圖形函數(shù)

circle()：創(chuàng)建一個圓形區(qū)域來屏蔽它所應(yīng)用的元素

ellipse()：創(chuàng)建一個橢圓區(qū)域來屏蔽它所應(yīng)用的元素

inset()：創(chuàng)建一個矩形區(qū)域來屏蔽它所應(yīng)用的元素

polygon()：創(chuàng)建一個多邊形區(qū)域來屏蔽它所應(yīng)用的元素

path()：創(chuàng)建一個自定義區(qū)域來屏蔽它所應(yīng)用的元素

五、濾鏡函數(shù)

blur()：對圖像應(yīng)用模糊效果

brightness()：調(diào)整圖像的亮度

contrast()：調(diào)整圖像的對比度

drop-shadow()：給圖像設(shè)置一個陰影效果

grayscale()：給圖像設(shè)置一個陰影效果

hue-rotate()：給圖像應(yīng)用色相旋轉(zhuǎn)

invert()：反轉(zhuǎn)輸入圖像

opacity()：轉(zhuǎn)化圖像的透明程度

saturate()：轉(zhuǎn)換圖像飽和度

sepia()：轉(zhuǎn)換圖像飽和度

六、轉(zhuǎn)換函數(shù)

matrix()：以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換，相當(dāng)于直接應(yīng)用一個[a,b,c,d,e,f]變換矩陣

matrix3d()：定義 3D 轉(zhuǎn)換，使用 16 個值的 4x4 矩陣

perspective()：為 3D 轉(zhuǎn)換元素定義透視視圖

rotate()：指定對象的2D rotation（2D旋轉(zhuǎn)），需先有transform-origin屬性的定義

rotate3d()：定義 3D 旋轉(zhuǎn)

rotateX()：沿著 X 軸的 3D 旋轉(zhuǎn)

rotateY()：沿著 Y 軸的 3D 旋轉(zhuǎn)

rotateZ()：沿著 Z 軸的 3D 旋轉(zhuǎn)

scale()：指定對象的2D scale（2D縮放）

scale3d()：指定對象的2D scale（3D縮放）

scaleX()：指定對象X軸的（水平方向）縮放

scaleY()：指定對象Y軸的（垂直方向）縮放

scaleZ()：指定對象Z軸的（垂直方向）縮放

skew()：指定對象斜切扭曲，沿著 X 和 Y 軸的 2D 傾斜轉(zhuǎn)換

skewX()：指定對象X軸的（水平方向）扭曲

skewY()：指定對象Y軸的（垂直方向）扭曲

translate()：指定對象的2D translation（2D平移）

translateX()：指定對象X軸（水平方向）的平移

translateY()：指定對象Y軸（垂直方向）的平移

translateZ()：指定對象Z軸（垂直方向）的平移

translate3d()：指定對象的2D translation（2D平移）

七、數(shù)學(xué)函數(shù)

calc()：允許計算 CSS 的屬性值，比如動態(tài)計算長度值

min()：從逗號分隔符表達式中選擇一個最小值作為 CSS 的屬性值

max()：從逗號分隔符表達式中選擇一個更大值作為 CSS 的屬性值

mixmax()：定義了一個長寬范圍的閉區(qū)間， 它與CSS網(wǎng)格布局一起使用

repeat()：以更緊湊的形式寫入大量顯示重復(fù)模式的列或行

八、緩動函數(shù)

cubic-bezier()：toggle的舊版本

steps()：階梯函數(shù)，這個函數(shù)能夠起到定格動畫的效果

九、其他函數(shù)

counter()：將計數(shù)器的值添加到元素

counters()：將計數(shù)器的值添加到不同的嵌套層級的元素

toggle()：允許子孫元素使用取值序列中的值循環(huán)替換繼承而來的值

var()：插入自定義屬性的值

symbols()：允許自定義序列號的符號，如 list-style