20 个 CSS 函数，释放你的创造力

CSS函数是一种特殊的值，它可以接受参数，并根据参数计算新的值。CSS函数有许多种，例如attr(), calc(), linear-gradient(), url()等等。下面是20个CSS函数的简单介绍和使用示例：

1. attr()：可以获取元素的属性值。

div::before {
  content: attr(data-info);
}

2. linear-gradient()：创建线性渐变背景。

div {
  background: linear-gradient(to right, red, yellow);
}

3. radial-gradient()：创建径向渐变背景。

div {
  background: radial-gradient(circle, red, yellow, green);
}

4. url()：引入外部资源，如图片和字体。

div {
  background-image: url('image.png');
}

5. calc()：执行简单的数学运算。

div {
  width: calc(100% - 20px);
}

6. min()和max()：取两个值中的最小值或最大值。

div {
  font-size: max(10px, 15px);
}

7. clamp()：限制一个值的范围。

div {
  font-size: clamp(10px, 14px, 18px);
}

8. repeat()和repeat-x()/repeat-y()：设置背景图片的重复方式。

div {
  background-image: repeat(url('image.png'));
}

9. mix()：混合两种颜色。

div {
  background-color: mix(red, blue);
}

10. step()：根据指定的间隔返回不同的值。

div::before {
  content: 'State ' counter(section);
  counter-increment: section;
}
@media print {
  div::before {
    content: step(section, 'Step ', 'Chapter ');
  }
}

11. var()：获取CSS变量的值。

:root {
  --main-color: #333;
}
div {
  color: var(--main-color);
}

12. counter()和counterIncrement()：创建自定义计数器。

div::before {
  counter-increment: section;
  content: 'Section ' counter(section);
}

13. filter()：应用各种视觉效果，如模糊，锐化，饱和度等。

div {
  filter: blur(5px);
}

14. hsl()和hsla()：使用色相，饱和度，亮度或透明度值定义颜色。

div {
  background-color: hsl(240, 100%, 50%);
}

15. rgb()和rgba()：使用红，绿，蓝或透明度值定义颜色。

div {
  background-color: rgba(255, 0, 0, 0.5);
}

16. min()和max()：取两个值中的最小值或最大值。

div {
  font-size: max(10px, 15px);
}

17. calc()：执行简单的数学运算。

div {
  width: calc(100% - 20px);
}

18. custom-ident()：用于自定义标识符。

.foo {
  --strategy: thing