Manuel de fonctions CSS

Fonction CSS

Les fonctions CSS peuvent être utilisées pour calculer des valeurs, manipuler des chaînes ou des couleurs, créer des dégradés et des formes complexes, etc.

Les fonctions CSS sont généralement utilisées comme valeurs pour divers attributs CSS.

Fonction Description
acos() Retourne l'arc cosinus de la valeur entre -1 et 1.
asin() Retourne l'arc sinus de la valeur entre -1 et 1.
atan() Retourne l'arc tangente de la valeur entre -∞ et ∞.
atan2() Retourne l'arc tangente des deux valeurs entre -∞ et ∞.
attr() Retourne la valeur de l'attribut de l'élément sélectionné.
blur() Appliquer un effet de flou à l'élément.
brightness() Ajuster la luminosité de l'élément (plus lumineux ou plus sombre).
calc() Permet de faire des calculs pour déterminer la valeur de l'attribut CSS.
circle() Définir un cercle.
clamp() Définir une valeur qui sera ajustée entre la valeur minimale et maximale en fonction de la taille de la viewport.
color() Permet de spécifier une couleur dans un espace de couleur spécifique.
color-mix() Mélanger deux valeurs de couleurs données dans un espace de couleur donné en proportion.
conic-gradient() Créer une dégradé conique.
contrast() Ajuster la contraste de l'élément.
cos() Retourne la valeur cosinus de l'angle.
counter() Retourne la valeur actuelle du compteur nommé.
counters() Retourne la valeur actuelle du compteur nommé et imbriqué.
cubic-bezier() Définir une courbe Bézier cubique.
drop-shadow() Appliquer un effet de projection sur l'image.
ellipse() Définir une ellipse.
exp() Retourne la puissance x de E (Ex)
fit-content() Permet de modifier la taille des éléments en fonction du contenu.
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() Définit la couleur en utilisant le modèle RVB (RGB) ; l'élément alpha est optionnel.
rotate() Définit la rotation 2D de l'élément.
rotate3d() Définit la rotation 3D de l'élément.
rotateX() Définit la rotation 3D de l'élément autour de l'axe x (horizontale).
rotateY() Définit la rotation 3D de l'élément autour de l'axe y (verticale).
rotateZ() Définit la rotation 3D de l'élément autour de l'axe z.
round() Arrondit le nombre selon une stratégie d'arrondi spécifiée.
saturate() Ajuste la saturation de l'élément (intensité des couleurs).
scale() Définit le redimensionnement 2D de l'élément.
scale3d() Définit le redimensionnement 3D de l'élément.
scaleX() Redimensionne horizontalement l'élément (largeur).
scaleY() Redimensionne verticalement l'élément (hauteur).
sepia() Convertit l'image en tons sépia.
sin() Retourne la valeur sinus du nombre (angle).
skew() Incline l'élément le long des axes x et y.
skewX() Incline l'élément le long de l'axe x.
skewY() Incline l'élément le long de l'axe y.
sqrt() Retourne la racine carrée du nombre.
steps() Crée une fonction de temps en étapes pour l'animation.
tan() Retourne la valeur tangente du nombre.
translate() Permet de répositionner l'élément le long des axes x et y.
translateX() Permet de répositionner l'élément le long de l'axe x.
translateY() Permet de répositionner l'élément le long de l'axe y.
url() Permet d'inclure des fichiers dans les feuilles de style.
var() Insérer la valeur de l'attribut personnalisé.