之前一直以為css沒有幾個函數，今天才發現css現在竟然已經有86個函數了，意不意外，驚不驚喜！我一直比較喜歡用css來解決之前js實現的效果，這樣對性能時一種優化，自己也有成就感，希望這些函數能夠更多的應用到自己的項目中！根據w3cplus中可以劃分為以下幾類：
一、屬性函數
attr() 返回所選元素的屬性值
二、背景圖片函數：
linear-gradient()：將線性漸變設置為背景圖像。定義至少兩種顏色（從上到下）
radial-gradient()：將徑向漸變設置為背景圖像。定義至少兩種顏色（從中心到邊緣）
conic-gradient()：錐形漸變
repeating-linear-gradient()：重復線性漸變
repeating-radial-gradient()：重復徑向漸變
repeating-conic-gradient()：重復錐形漸變
image-set()：可以根據用戶設備的分辨率匹配合適的圖像
image()：指定圖像或者圖像替代，與url()功能類似，比url增加了一些功能
url()：使用URL來加載外部資源
element()：以將元素當作圖片渲染
三、顏色函數：
rgb()：使用紅(R)、綠(G)、藍(B)三個顏色的疊加來生成各式各樣的顏色
rgba()：使用紅(R)、綠(G)、藍(B)、透明度(A)的疊加來生成各式各樣的顏色
hsl()：使用色相-飽和度-亮度模型（HSL）定義顏色
hsla()：使用色相、飽和度、亮度、透明度來定義顏色
hwb()：允許通過指定顏色的色調、白度和黑度分量以及alpha值來指定顏色值
color-mod()：等價于color(#29B4F0 a() s() h() l() tint() shade() w() b() contrast());
四、圖形函數
circle()：創建一個圓形區域來屏蔽它所應用的元素
ellipse()：創建一個橢圓區域來屏蔽它所應用的元素
inset()：創建一個矩形區域來屏蔽它所應用的元素
polygon()：創建一個多邊形區域來屏蔽它所應用的元素
path()：創建一個自定義區域來屏蔽它所應用的元素
五、濾鏡函數
blur()：對圖像應用模糊效果
brightness()：調整圖像的亮度
contrast()：調整圖像的對比度
drop-shadow()：給圖像設置一個陰影效果
grayscale()：給圖像設置一個陰影效果
hue-rotate()：給圖像應用色相旋轉
invert()：反轉輸入圖像
opacity()：轉化圖像的透明程度
saturate()：轉換圖像飽和度
sepia()：轉換圖像飽和度
六、轉換函數
matrix()：以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換，相當于直接應用一個[a,b,c,d,e,f]變換矩陣
matrix3d()：定義 3D 轉換，使用 16 個值的 4x4 矩陣
perspective()：為 3D 轉換元素定義透視視圖
rotate()：指定對象的2D rotation（2D旋轉），需先有transform-origin屬性的定義
rotate3d()：定義 3D 旋轉
rotateX()：沿著 X 軸的 3D 旋轉
rotateY()：沿著 Y 軸的 3D 旋轉
rotateZ()：沿著 Z 軸的 3D 旋轉
scale()：指定對象的2D scale（2D縮放）
scale3d()：指定對象的2D scale（3D縮放）
scaleX()：指定對象X軸的（水平方向）縮放
scaleY()：指定對象Y軸的（垂直方向）縮放
scaleZ()：指定對象Z軸的（垂直方向）縮放
skew()：指定對象斜切扭曲，沿著 X 和 Y 軸的 2D 傾斜轉換
skewX()：指定對象X軸的（水平方向）扭曲
skewY()：指定對象Y軸的（垂直方向）扭曲
translate()：指定對象的2D translation（2D平移）
translateX()：指定對象X軸（水平方向）的平移
translateY()：指定對象Y軸（垂直方向）的平移
translateZ()：指定對象Z軸（垂直方向）的平移
translate3d()：指定對象的2D translation（2D平移）
七、數學函數
calc()：允許計算 CSS 的屬性值，比如動態計算長度值
min()：從逗號分隔符表達式中選擇一個最小值作為 CSS 的屬性值
max()：從逗號分隔符表達式中選擇一個更大值作為 CSS 的屬性值
mixmax()：定義了一個長寬范圍的閉區間， 它與CSS網格布局一起使用
repeat()：以更緊湊的形式寫入大量顯示重復模式的列或行
八、緩動函數
cubic-bezier()：toggle的舊版本
steps()：階梯函數，這個函數能夠起到定格動畫的效果
九、其他函數
counter()：將計數器的值添加到元素
counters()：將計數器的值添加到不同的嵌套層級的元素
toggle()：允許子孫元素使用取值序列中的值循環替換繼承而來的值
var()：插入自定義屬性的值
symbols()：允許自定義序列號的符號，如 list-style
