Manual de funciones CSS

Funciones CSS

Las funciones CSS se pueden usar para calcular valores, operar cadenas o colores, crear degradados y formas complejas, etc.

Las funciones CSS se utilizan comúnmente como valores de varios atributos CSS.

Función Descripción
acos() Devuelve el valor arco coseno inverso de un número entre -1 y 1.
asin() Devuelve el valor arco seno inverso de un número entre -1 y 1.
atan() Devuelve el valor arco tangente inverso de un número entre -∞ y ∞.
atan2() Devuelve el valor arco tangente inverso de dos valores entre -∞ y ∞.
attr() Devuelve el valor de la propiedad del elemento seleccionado.
blur() Aplica un efecto borroso al elemento.
brightness() Ajusta la luminosidad del elemento (más brillante o más oscuro).
calc() Permite realizar cálculos para determinar valores de propiedades CSS.
circle() Define un círculo.
clamp() Establece un valor que se ajustará entre el valor mínimo y máximo según el tamaño de la vista.
color() Permite especificar un color en un espacio de color específico.
color-mix() Mezcla dos valores de color en una proporción dada en el espacio de color dado.
conic-gradient() Crea un degradado conoide.
contrast() Ajusta la contraste del elemento.
cos() Devuelve el valor del coseno del ángulo.
counter() Devuelve el valor actual del contador nombrado.
counters() Devuelve el valor actual del contador anidado y nombrado.
cubic-bezier() Define una curva bezier cúbica.
drop-shadow() Aplica un efecto de proyección a la imagen.
ellipse() Define una elipse.
exp() Devuelve el poder x de E (Ex)
fit-content() Permite ajustar el tamaño de los elementos según el contenido.
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() Define el color utilizando el modelo de color rojo-verde-azul (RGB); opcionalmente incluye el componente alpha.
rotate() Define la rotación 2D del elemento.
rotate3d() Define la rotación 3D del elemento.
rotateX() Define la rotación 3D del elemento alrededor del eje x (horizontal).
rotateY() Define la rotación 3D del elemento alrededor del eje y (vertical).
rotateZ() Define la rotación 3D del elemento alrededor del eje z.
round() Redondea el número según la estrategia de redondeo especificada.
saturate() Ajusta la saturación del elemento (intensidad del color).
scale() Define la escala 2D del elemento.
scale3d() Define la escala 3D del elemento.
scaleX() Escala horizontalmente el elemento (ancho).
scaleY() Escala verticalmente el elemento (altura).
sepia() Convierte la imagen en tonos sepia.
sin() Devuelve el valor seno del número (ángulo).
skew() Inclina el elemento a lo largo de los ejes x e y.
skewX() Inclina el elemento a lo largo del eje x.
skewY() Inclina el elemento a lo largo del eje y.
sqrt() Devuelve la raíz cuadrada del número.
steps() Crea una función de tiempo de paso para la animación.
tan() Devuelve el valor tangente del número.
translate() Permite reubicar elementos a lo largo de los ejes x e y.
translateX() Permite reubicar elementos a lo largo del eje x.
translateY() Permite reubicar elementos a lo largo del eje y.
url() Permite incluir archivos en las tablas de estilo.
var() Insertar el valor de la propiedad personalizada.