1. var
CSS中可以自定義屬性
* 屬性名需要以兩個減號（--）開始;
* 屬性值則可以是任何有效的CSS值;
我們可以通過var函數(shù)來使用:
規(guī)則集定義的選擇器, 是自定義屬性的可見作用域(只在選擇器內(nèi)部有效)
所以推薦將自定義屬性定義在html中，也可以使用 :root選擇器;
2. calc
calc() 函數(shù)允許在聲明 CSS 屬性值時執(zhí)行一些計算
計算支持加減乘除的運算；
運算符的兩邊必須要有空白字符。通常用來設置一些元素的尺寸或者位置；
3. blur
blur(radius) 函數(shù)將高斯模糊應用于輸出圖片或者元素;偏差值越大, 圖片越模糊;
通常會和兩個屬性一起使用：
filter: 將模糊或顏色偏移等圖形效果應用于元素;
backdrop-filter: 為元素后面的區(qū)域添加模糊或者其他效果;
兩者之間的差異，filter 是作用于元素本身，而 backdrop-filter 是作用于元素背后的區(qū)域所覆蓋的所有元素。
這里引用該篇文章
傻傻分不清楚？深入探討 filter 與 backdrop-filter 的異同_奇舞周刊的博客-CSDN博客
.bg {
background: url(image.png);
& > div {
width: 300px;
height: 200px;
background: rgba(255, 255, 255, .7);
}
.g-filter {
filter: blur(6px);
}
.g-backdrop-filter {
backdrop-filter: blur(6px);
}
}
4. gradient
gradient是一種<image>CSS數(shù)據(jù)類型的子類型，用于表現(xiàn)兩種或多種顏色的過渡轉(zhuǎn)變。
- CSS的<image>數(shù)據(jù)類型描述的是2D圖形；
- 比如background-image、list-style-image、border-image、content等；
- <image>常見的方式是通過url來引入一個圖片資源；
- 它也可以通過CSS的<gradient> 函數(shù)來設置顏色的漸變；
<gradient>常見的函數(shù)實現(xiàn)有下面幾種：
- linear-gradient()：創(chuàng)建一個表示兩種或多種顏色線性漸變的圖片；
- radial-gradient()：創(chuàng)建了一個圖像，該圖像是由從原點發(fā)出的兩種或者多種顏色之間的逐步過渡組成；
- repeating-linear-gradient()：創(chuàng)建一個由重復線性漸變組成的<image>；
- repeating-radial-gradient()：創(chuàng)建一個重復的原點觸發(fā)漸變組成的<image>；
linear-gradient：創(chuàng)建一個表示兩種或多種顏色線性漸變的圖片；
radial-gradient：創(chuàng)建了一個圖像，該圖像是由從原點發(fā)出的兩種或者多種顏色之間的逐步過渡組成；
