1.linear-gradient()函数 （CSS3）

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

语法

创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从下到上渐变。

/* 从上到下，蓝色渐变到红色 */
linear-gradient(blue, red);

/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);

/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);

/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

实例

和-webkit-background-clip配合可以实现渐变填充

/* html */
<div>Text</div>

/* css */
-webkit-background-clip: text;
color: transparent;
background-image: linear-gradient(rgb(255, 192, 0) 0%, rgb(255, 217, 102) 50%, rgb(255, 242, 204) 100%);

2.CSS比较函数（min()、max()、clamp()） （CSS3）

（1）min() 函数

min() 函数支持一个或多个表达式，每个表达式之间使用逗号分隔，以最小的表达式的值作为返回值，可以使用 min() 为元素设置最大值。

例如：设置元素的最大宽度为 500px 。

.element{
    width: min(50%, 500px)
}

（2）max()函数

max() 函数以最大值为返回值，语法跟 min() 函数类似。可以使用 max() 函数为元素设置最小值。

例如：设置元素的最小宽度为 500px。

.element{
    width: max(50%, 500px);
}

（3）clamp()函数

clamp() 函数的作用是返回一个区间范围的值。

语法：clamp(MIN, VAL, MAX)

其中 MIN 表示最小值， VAL 表示首选值， MAX 表示最大值。意思是，如果 VAL 在 MIN 和 MAX 范围之间，则使用 VAL 作为函数返回值；如果 VAL 大于 MAX，则使用 MAX作为返回值；如果 VAL 小于 MIN ，则使用 MIN 作为返回值。

例如：有一个元素，最小宽度为 200px ，首选值为 50% ，最大值为 1000px 。

.element{
    width: clamp(200px, 50%, 1000px);
}