CSS-Funktion-Referenzhandbuch

CSS 函数

CSS 函数可用于计算值、操作字符串或颜色、创建复杂的渐变和形状等。

CSS 函数通常用作各种 CSS 属性的值。

函数 描述
acos() 返回介于 -1 和 1 之间的数的反余弦值。
asin() 返回介于 -1 和 1 之间的数的反正弦值。
atan() 返回介于 -∞ 和 ∞ 之间的数的反正切值。
atan2() 返回介于 -∞ 和 ∞ 之间的两个值的反正切值。
attr() 返回所选元素的属性值。
blur() 对元素应用模糊效果。
brightness() 调整元素的亮度（更亮或更暗）。
calc() 允许进行计算以确定 CSS 属性值。
circle() 定义圆。
clamp() 设置一个值，该值将根据视口的大小在最小值和最大值之间进行调整。
color() 允许在特定的指定颜色空间中指定颜色。
color-mix() 在给定颜色空间中，按给定比例混合两种颜色值。
conic-gradient() 创建锥形渐变。
contrast() 调整元素的对比度。
cos() 返回角度的余弦值。
counter() 返回命名计数器的当前值。
counters() 返回命名和嵌套计数器的当前值。
cubic-bezier() 定义三次贝塞尔曲线。
drop-shadow() 对图像应用投影效果。
ellipse() 定义椭圆。
exp() 返回 E 的指定数 x 次幂 (Ex)
fit-content() 允许根据内容调整元素的大小。
grayscale() 将图像转换为灰度。
hsl() / hsla() 使用色相-饱和度-亮度模型 (HSL) 定义颜色；可选地包含 alpha 组件。
hue-rotate() 对元素应用颜色旋转
hwb() 使用色相-白度-黑度模型 (HWB) 定义颜色；可选地包含 alpha 组件。
hypot() 返回其参数平方和的平方根。
inset() 定义与参考框每一边保持指定内嵌距离的矩形。
invert() 反转图像的颜色。
lab() 在 CIE Lab 颜色空间中指定颜色。
lch() 在 LCH（亮度-色度-色相）颜色空间中指定颜色。
light-dark() 启用两种颜色值设置，如果用户设置了浅色主题，则返回第一个值；
如果用户设置了深色主题，则返回第二个值。
linear-gradient() 创建线性渐变。
log() 返回指定数的自然对数（以 E 为底），或指定底数的对数。
matrix() 使用六值矩阵定义 2D 变换。
matrix3d() 使用 4x4 矩阵定义 3D 变换。
max() 使用逗号分隔的值列表中的最大值作为属性值。
min() 使用逗号分隔的值列表中的最小值作为属性值。
minmax() 定义大于或等于最小值且小于或等于最大值的大小范围（用于 CSS 网格）。
mod() 返回一个数除以另一个数后的余数。
oklab() 在 OKLAB 颜色空间中指定颜色。
oklch() 在 OKLCH 颜色空间中指定颜色。
opacity() 对元素应用不透明度效果。
perspective() 为 3D 变换元素定义透视视图。
polygon() 定义多边形。
pow() 返回一个数 (x) 的另一个数 (y) 次幂的值。
radial-gradient() 创建径向渐变。
ray() 定义动画元素应遵循的偏移路径线段。
rem() 返回一个数除以另一个数后的余数。
repeat() 在网格中重复一组列或行。
repeating-conic-gradient() 重复锥形渐变。
repeating-linear-gradient() 重复线性渐变。
repeating-radial-gradient() 重复径向渐变。
rgb() / rgba() Definiert die Farbe mit dem Rot-Grün-Blau-Modell (RGB); optional kann das Alpha-Element enthalten.
rotate() Definiert die 2D-Drehung des Elements.
rotate3d() Definiert die 3D-Drehung des Elements.
rotateX() Definiert die 3D-Drehung des Elements um die x-Achse (horizontal).
rotateY() Definiert die 3D-Drehung des Elements um die y-Achse (vertikal).
rotateZ() Definiert die 3D-Drehung des Elements um die z-Achse.
round() Rundet die Zahl gemäß der angegebenen Rundenstrategie.
saturate() Anpasst die Sättigung des Elements (Farbstärke).
scale() Definiert die 2D-Skalierung des Elements.
scale3d() Definiert die 3D-Skalierung des Elements.
scaleX() Skaliert das Element horizontal (Breite).
scaleY() Skaliert das Element vertikal (Höhe).
sepia() Konvertiert das Bild in eine Sepia-Tönung.
sin() Gibt den Sinus des Werts zurück.
skew() Verschiebt das Element entlang der x- und y-Achse.
skewX() Verschiebt das Element entlang der x-Achse.
skewY() Verschiebt das Element entlang der y-Achse.
sqrt() Gibt die Quadratwurzel des Wertes zurück.
steps() Erstellt eine Schritt-für-Schritt-Zeitfunktion für Animationen.
tan() Gibt den Tangens des Wertes zurück.
translate() Ermöglicht die Neuer定位元素 entlang der x- und y-Achse.
translateX() Ermöglicht die Neuer定位元素 entlang der x-Achse.
translateY() Ermöglicht die Neuer定位元素 entlang der y-Achse.
url() Ermöglicht die Einbeziehung von Dateien in der Stilübersicht.
var() Geben Sie den Wert der benutzerdefinierten Eigenschaft ein.