Manual de funções CSS

Funções CSS

As funções CSS podem ser usadas para calcular valores, operar strings ou cores, criar gradientes e formas complexas, etc.

As funções CSS são geralmente usadas como valores de várias propriedades CSS.

Função Descrição
acos() Retorna o valor arco cosseno de um número entre -1 e 1.
asin() Retorna o valor arco seno de um número entre -1 e 1.
atan() Retorna o valor arco tangente de um número entre -∞ e ∞.
atan2() Retorna o valor arco tangente de dois valores entre -∞ e ∞.
attr() Retorna o valor da propriedade do elemento selecionado.
blur() Aplica um efeito de borrão ao elemento.
brightness() Ajusta a brilho do elemento (mais brilhante ou mais escuro).
calc() Permite realizar cálculos para determinar o valor da propriedade CSS.
circle() Define um círculo.
clamp() Define um valor que será ajustado entre o valor mínimo e máximo com base no tamanho da viewport.
color() Permite especificar uma cor em um espaço de cores específico.
color-mix() Mistura duas cores em uma proporção dada no espaço de cores especificado.
conic-gradient() Cria um gradiente côncavo.
contrast() Ajusta a contraste do elemento.
cos() Retorna o valor do cosseno do ângulo.
counter() Retorna o valor atual do contador nomeado.
counters() Retorna o valor atual do contador nomeado e aninhado.
cubic-bezier() Define uma curva bézier cúbica.
drop-shadow() Aplica um efeito de projeção à imagem.
ellipse() Define uma elipse.
exp() Retorna o E elevado à potência x (Ex)
fit-content() Permite ajustar o tamanho dos elementos com base no conteúdo.
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 a cor usando o modelo de cor vermelho-azul-azul (RGB); opcionalmente inclui o componente alpha.
rotate() Define a rotação 2D do elemento.
rotate3d() Define a rotação 3D do elemento.
rotateX() Define a rotação 3D do elemento em torno do eixo x (horizontal).
rotateY() Define a rotação 3D do elemento em torno do eixo y (vertical).
rotateZ() Define a rotação 3D do elemento em torno do eixo z.
round() Arredonda o número com base na estratégia de arredondamento especificada.
saturate() Ajusta a saturação do elemento (intensidade da cor).
scale() Define a escalabilidade 2D do elemento.
scale3d() Define a escalabilidade 3D do elemento.
scaleX() Escala horizontalmente o elemento (largura).
scaleY() Escala verticalmente o elemento (altura).
sepia() Converte a imagem para tons sepia.
sin() Retorna o valor seno do número (ângulo).
skew() Inclina o elemento ao longo dos eixos x e y.
skewX() Inclina o elemento ao longo do eixo x.
skewY() Inclina o elemento ao longo do eixo y.
sqrt() Retorna a raiz quadrada do número.
steps() Cria uma função de tempo de passo para animação.
tan() Retorna o valor tangente do número.
translate() Permite relocalizar o elemento ao longo dos eixos x e y.
translateX() Permite relocalizar o elemento ao longo do eixo x.
translateY() Permite relocalizar o elemento ao longo do eixo y.
url() Permite incluir arquivos no estilo.
var() Inserir o valor da propriedade personalizada.