CSS 函数完整参考

CSS 函数是用于在 CSS 样式表中执行特定任务的工具。

本文将为您介绍 CSS 函数，以及如何使用它们来创建具有吸引力的样式。

CSS 函数

attr()

该函数允许您在元素中使用属性值。

.item::before {
  content: attr(data-content);
}

calc()

该函数让您可以在 CSS 属性中执行数学运算。

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

var()

该函数允许您使用自定义 CSS 属性。它还允许您设置默认值。

:root {
  --primary-color: blue;
}

.item {
  color: var(--primary-color, black);
}

url()

该函数允许您为 CSS 属性设置一个 URL。

.item {
  background-image: url(https://example.com/image.jpg);
}

rgb()

该函数允许您设置一个 RGB 颜色（红、绿、蓝）。

.item {
  color: rgb(255, 0, 0);
}

rgba()

该函数允许您设置一个带透明度的 RGB 颜色。

.item {
  color: rgba(255, 0, 0, 0.5);
}

hsl()

该函数允许您设置一个 HSL 颜色（色调、饱和度、亮度）。

.item {
  color: hsl(0, 100%, 50%);
}

hsla()

该函数允许您设置一个带透明度的 HSL 颜色。

.item {
  color: hsla(0, 100%, 50%, 0.5);
}

rotate()

该函数允许您旋转元素。它需要一个角度作为参数。

.item {
  transform: rotate(45deg);
}

scale()

该函数允许您缩放元素。它需要一个比例作为参数。

.item {
  transform: scale(2);
}

translate()

该函数允许您移动元素。它需要 X 和 Y 方向的值作为参数。

.item {
  transform: translate(50px, 100px);
}

结论

CSS 函数是创建引人注目的样式的重要工具。掌握这些函数的用法，您可以将 CSS 样式表推向全新的高度，为您的用户提供更出色的用户体验。