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