CSS中常用的一些函数

概述

CSS中提供了许多有用的函数，使我们能够创建动态样式，以响应用户的操作或环境的变化。常用的CSS函数包括：

calc()函数支持加、减、乘、除四种运算，可以用来计算长度、角度和时间等属性值。例如，我们可以使用calc()函数计算元素的宽度，使其等于父元素宽度的70%：

width: calc(70% - 20px);

min()和max()函数用于返回两个或多个值中的最小值或最大值。例如，我们可以使用min()函数限制元素的宽度，使其最小为300px：

width: min(300px, 50%);

clamp()函数用于将一个值限制在一个最小值和最大值之间。例如，我们可以使用clamp()函数限制元素的字体大小，使其在12px到24px之间变化：

font-size: clamp(12px, 1.2rem, 24px);

linear-gradient()函数用于创建线性渐变背景。例如，我们可以使用linear-gradient()函数创建一个从红色到蓝色的渐变背景：

background: linear-gradient(to right, red, blue);

radial-gradient()函数用于创建径向渐变背景。例如，我们可以使用radial-gradient()函数创建一个从中心到边缘的渐变背景：

background: radial-gradient(circle, red, blue);

repeating-linear-gradient()函数用于创建重复的线性渐变背景。例如，我们可以使用repeating-linear-gradient()函数创建一个重复的从红色到蓝色的渐变背景：

background: repeating-linear-gradient(to right, red, blue);

repeating-radial-gradient()函数用于创建重复的径向渐变背景。例如，我们可以使用repeating-radial-gradient()函数创建一个重复的从中心到边缘的渐变背景：

background: repeating-radial-gradient(circle, red, blue);

filter()函数用于为元素添加滤镜效果。例如，我们可以使用filter()函数为元素添加模糊效果：

filter: blur(5px);