CSS函数是一种特殊的值，它可以接受参数，并根据参数计算新的值。CSS函数有许多种，例如attr(), calc(), linear-gradient(), url()等等。下面是20个CSS函数的简单介绍和使用示例：
attr()：可以获取元素的属性值。
div::before {
content: attr(data-info);
}
linear-gradient()：创建线性渐变背景。
div {
background: linear-gradient(to right, red, yellow);
}
radial-gradient()：创建径向渐变背景。
div {
background: radial-gradient(circle, red, yellow, green);
}
url()：引入外部资源，如图片和字体。
div {
background-image: url('image.png');
}
calc()：执行简单的数学运算。
div {
width: calc(100% - 20px);
}
min()和max()：取两个值中的最小值或最大值。
div {
font-size: max(10px, 15px);
}
clamp()：限制一个值的范围。
div {
font-size: clamp(10px, 14px, 18px);
}
repeat()和repeat-x()/repeat-y()：设置背景图片的重复方式。
div {
background-image: repeat(url('image.png'));
}
mix()：混合两种颜色。
div {
background-color: mix(red, blue);
}
step()：根据指定的间隔返回不同的值。
div::before {
content: 'State ' counter(section);
counter-increment: section;
}
@media print {
div::before {
content: step(section, 'Step ', 'Chapter ');
}
}
var()：获取CSS变量的值。
:root {
--main-color: #333;
}
div {
color: var(--main-color);
}
counter()和counterIncrement()：创建自定义计数器。
div::before {
counter-increment: section;
content: 'Section ' counter(section);
}
filter()：应用各种视觉效果，如模糊，锐化，饱和度等。
div {
filter: blur(5px);
}
hsl()和hsla()：使用色相，饱和度，亮度或透明度值定义颜色。
div {
background-color: hsl(240, 100%, 50%);
}
rgb()和rgba()：使用红，绿，蓝或透明度值定义颜色。
div {
background-color: rgba(255, 0, 0, 0.5);
}
min()和max()：取两个值中的最小值或最大值。
div {
font-size: max(10px, 15px);
}
calc()：执行简单的数学运算。
div {
width: calc(100% - 20px);
}
custom-ident()：用于自定义标识符。
.foo {
--strategy: thing