1. var
CSS中可以自定义属性
* 属性名需要以两个减号（--）开始;
* 属性值则可以是任何有效的CSS值;
我们可以通过var函数来使用:
规则集定义的选择器, 是自定义属性的可见作用域(只在选择器内部有效)
所以推荐将自定义属性定义在html中，也可以使用 :root选择器;
2. calc
calc() 函数允许在声明 CSS 属性值时执行一些计算
计算支持加减乘除的运算；
运算符的两边必须要有空白字符。通常用来设置一些元素的尺寸或者位置；
3. blur
blur(radius) 函数将高斯模糊应用于输出图片或者元素;偏差值越大, 图片越模糊;
通常会和两个属性一起使用：
filter: 将模糊或颜色偏移等图形效果应用于元素;
backdrop-filter: 为元素后面的区域添加模糊或者其他效果;
两者之间的差异，filter 是作用于元素本身，而 backdrop-filter 是作用于元素背后的区域所覆盖的所有元素。
这里引用该篇文章
傻傻分不清楚？深入探讨 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数据类型的子类型，用于表现两种或多种颜色的过渡转变。
- CSS的<image>数据类型描述的是2D图形；
- 比如background-image、list-style-image、border-image、content等；
- <image>常见的方式是通过url来引入一个图片资源；
- 它也可以通过CSS的<gradient> 函数来设置颜色的渐变；
<gradient>常见的函数实现有下面几种：
- linear-gradient()：创建一个表示两种或多种颜色线性渐变的图片；
- radial-gradient()：创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成；
- repeating-linear-gradient()：创建一个由重复线性渐变组成的<image>；
- repeating-radial-gradient()：创建一个重复的原点触发渐变组成的<image>；
linear-gradient：创建一个表示两种或多种颜色线性渐变的图片；
radial-gradient：创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成；
