CSS 函数清单，点亮样式设计之路！

常用 CSS 函数

1. attr() 函数

attr() 函数允许您获取元素的属性值，并将其用作样式值。语法为：

attr(attribute-name)

例如：

div {
  color: attr(data-color);
}

上面的代码将元素的 data-color 属性值作为 color 属性的值。

2. calc() 函数

calc() 函数允许您执行数学计算，并将其结果用作样式值。语法为：

calc(expression)

例如：

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

上面的代码将元素的宽度设置为其父元素宽度的 80%。

3. linear-gradient() 函数

linear-gradient() 函数允许您创建线性渐变效果。语法为：

linear-gradient(direction, color-stop1, color-stop2, ...)

例如：

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

上面的代码将元素的背景设置为从红色渐变到黄色再到绿色的线性渐变效果。

4. radial-gradient() 函数

radial-gradient() 函数允许您创建径向渐变效果。语法为：

radial-gradient(shape, size, position, color-stop1, color-stop2, ...)

例如：

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

上面的代码将元素的背景设置为从红色渐变到黄色再到绿色的径向渐变效果，渐变的形状为圆形，大小为 100%。

5. repeating-linear-gradient() 函数

repeating-linear-gradient() 函数允许您创建重复的线性渐变效果。语法为：

repeating-linear-gradient(direction, color-stop1, color-stop2, ...)

例如：

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

上面的代码将元素的背景设置为从红色渐变到黄色再到绿色的重复的线性渐变效果。

结语

以上是常用的 CSS 函数清单，希望对您有所帮助。这些函数可以帮助您创建更复杂的样式效果，让您的网页设计更加美观和动态。如果您想了解更多关于 CSS 函数的信息，可以参考 CSS 规范或在线搜索相关教程。