Manuale di Funzione CSS

Funzioni CSS

Le funzioni CSS possono essere utilizzate per calcolare valori, operare stringhe o colori, creare gradienti e forme complesse, ecc.

Le funzioni CSS vengono spesso utilizzate come valori di vari attributi CSS.

Funzione Descrizione
acos() Restituire l'arco coseno del numero tra -1 e 1.
asin() Restituire l'arco seno del numero tra -1 e 1.
atan() Restituire l'arco tangente del numero tra -∞ e ∞.
atan2() Restituire l'arco tangente dei due valori tra -∞ e ∞.
attr() Restituire il valore dell'attributo dell'elemento selezionato.
blur() Applicare un effetto sfocatura all'elemento.
brightness() Adattare la luminosità dell'elemento (più chiaro o più scuro).
calc() Permette di calcolare i valori delle proprietà CSS.
circle() Definire un cerchio.
clamp() Impostare un valore che viene adattato tra il minimo e il massimo in base alla dimensione della viewport.
color() Permette di specificare un colore in uno spazio dei colori specifico.
color-mix() Mescolare due valori di colore in una scala data nello spazio dei colori specificato.
conic-gradient() Creare una gradazione conica.
contrast() Adattare la contrasto dell'elemento.
cos() Restituisce il valore del coseno dell'angolo.
counter() Restituisce il valore corrente del contatore nome.
counters() Restituisce il valore corrente del contatore nome e annidato.
cubic-bezier() Definire una curva bicubic.
drop-shadow() Applicare un effetto proiettivo all'immagine.
ellipse() Definire un ellisse.
exp() Restituisce la potenza specifica x di E (Ex)
fit-content() Permette di adattare la dimensione degli elementi in base al contenuto.
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() Definisci il colore utilizzando il modello di colore rosso-verde-blu (RGB); opzionalmente includi il componente alpha.
rotate() Definisci la rotazione 2D dell'elemento.
rotate3d() Definisci la rotazione 3D dell'elemento.
rotateX() Definisci la rotazione 3D dell'elemento intorno all'asse x (orizzontale).
rotateY() Definisci la rotazione 3D dell'elemento intorno all'asse y (verticale).
rotateZ() Definisci la rotazione 3D dell'elemento intorno all'asse z.
round() Arrotonda i numeri secondo la strategia di arrotondamento specificata.
saturate() Regola la saturazione dell'elemento (intensità del colore).
scale() Definisci la scala 2D dell'elemento.
scale3d() Definisci la scala 3D dell'elemento.
scaleX() Ridimensiona orizzontalmente l'elemento (larghezza).
scaleY() Ridimensiona verticalmente l'elemento (altezza).
sepia() Converti l'immagine in tonalità seppia.
sin() Restituisce il valore seno del numero (angolo).
skew() Inclina l'elemento lungo gli assi x e y.
skewX() Inclina l'elemento lungo l'asse x.
skewY() Inclina l'elemento lungo l'asse y.
sqrt() Restituisce la radice quadrata del numero.
steps() Crea una funzione di tempistica a passi per l'animazione.
tan() Restituisce il valore tangente del numero.
translate() Permette di ricollocare l'elemento lungo gli assi x e y.
translateX() Permette di ricollocare l'elemento lungo l'asse x.
translateY() Permette di ricollocare l'elemento lungo l'asse y.
url() Permette di includere file nella tabella di stili.
var() Inserisci il valore dell'attributo personalizzato.