之前一直以為css沒有幾個函數(shù)，今天才發(fā)現(xiàn)css現(xiàn)在竟然已經(jīng)有86個函數(shù)了，意不意外，驚不驚喜！我一直比較喜歡用css來解決之前js實現(xiàn)的效果，這樣對性能時一種優(yōu)化，自己也有成就感，希望這些函數(shù)能夠更多的應用到自己的項目中！根據(jù)w3cplus中可以劃分為以下幾類：
一、屬性函數(shù)
attr() 返回所選元素的屬性值
二、背景圖片函數(shù)：
linear-gradient()：將線性漸變設置為背景圖像。定義至少兩種顏色（從上到下）
radial-gradient()：將徑向漸變設置為背景圖像。定義至少兩種顏色（從中心到邊緣）
conic-gradient()：錐形漸變
repeating-linear-gradient()：重復線性漸變
repeating-radial-gradient()：重復徑向漸變
repeating-conic-gradient()：重復錐形漸變
image-set()：可以根據(jù)用戶設備的分辨率匹配合適的圖像
image()：指定圖像或者圖像替代，與url()功能類似，比url增加了一些功能
url()：使用URL來加載外部資源
element()：以將元素當作圖片渲染
三、顏色函數(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ū)域來屏蔽它所應用的元素
ellipse()：創(chuàng)建一個橢圓區(qū)域來屏蔽它所應用的元素
inset()：創(chuàng)建一個矩形區(qū)域來屏蔽它所應用的元素
polygon()：創(chuàng)建一個多邊形區(qū)域來屏蔽它所應用的元素
path()：創(chuàng)建一個自定義區(qū)域來屏蔽它所應用的元素
五、濾鏡函數(shù)
blur()：對圖像應用模糊效果
brightness()：調(diào)整圖像的亮度
contrast()：調(diào)整圖像的對比度
drop-shadow()：給圖像設置一個陰影效果
grayscale()：給圖像設置一個陰影效果
hue-rotate()：給圖像應用色相旋轉(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變換，相當于直接應用一個[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ù)學函數(shù)
calc()：允許計算 CSS 的屬性值，比如動態(tài)計算長度值
min()：從逗號分隔符表達式中選擇一個最小值作為 CSS 的屬性值
max()：從逗號分隔符表達式中選擇一個更大值作為 CSS 的屬性值
mixmax()：定義了一個長寬范圍的閉區(qū)間， 它與CSS網(wǎng)格布局一起使用
repeat()：以更緊湊的形式寫入大量顯示重復模式的列或行
八、緩動函數(shù)
cubic-bezier()：toggle的舊版本
steps()：階梯函數(shù)，這個函數(shù)能夠起到定格動畫的效果
九、其他函數(shù)
counter()：將計數(shù)器的值添加到元素
counters()：將計數(shù)器的值添加到不同的嵌套層級的元素
toggle()：允許子孫元素使用取值序列中的值循環(huán)替換繼承而來的值
var()：插入自定義屬性的值
symbols()：允許自定義序列號的符號，如 list-style
