CSS - 值函式

CSS 值函式允許您動態生成 CSS 屬性的值。這些函式接收引數並返回一個值，該值可以用作靜態值的替代。

語法

selector {
   property: function([argument]? [, argument]!);
}

函式名稱首先出現在值語法中，後跟一個開括號 (。引數緊隨其後，一個閉括號 ) 完成函式。
函式接受多個引數，其格式與 CSS 屬性值相同。
雖然可選，但在括號內允許使用空格。在某些函式表示法中，多個引數用逗號分隔，在其他函式表示法中用空格分隔。

變換函式

稱為 <transform-function> 的 CSS 資料型別表示視覺變換，並用作 transform 屬性中的值。

平移函式

下表列出了平移函式

函式	描述
translateX()	水平平移元素。
translateY()	垂直平移元素。
translateZ()	沿 z 軸平移元素。
translate()	在 2D 平面上平移元素。
translate3d()	在 3D 空間中平移元素。

旋轉函式

下表列出了旋轉函式

函式	描述
rotateX()	繞水平軸旋轉元素。
rotateY()	繞垂直軸旋轉元素。
rotateZ()	繞 z 軸旋轉元素。
rotate()	繞 2D 平面上固定點旋轉元素。
rotate3d()	繞 3D 空間中固定軸旋轉元素。

縮放函式

下表列出了縮放函式

函式	描述
scaleX()	水平縮放元素。
scaleY()	垂直縮放元素。
scaleZ()	沿 z 軸縮放元素。
scale()	在 2D 平面上縮放元素。
scale3d()	在 3D 空間中縮放元素。

傾斜函式

下表列出了傾斜函式

函式	描述
skewX()	沿水平方向傾斜元素。
skewY()	沿垂直方向傾斜元素。
skew()	在 2D 平面上傾斜元素。

矩陣函式

下表列出了矩陣函式

函式	描述
matrix()	描述齊次 2D 變換矩陣。
matrix3d()	將 3D 變換描述為 4×4 齊次矩陣。

透視函式

下表列出了透視函式

函式	描述
perspective()	設定使用者與 z=0 平面之間的距離。

數學函式

數學表示式可用於 CSS 中，使用數學函式表示數值。

基本算術函式

下表列出了基本算術函式

函式	描述
calc()	對數值執行基本算術計算。

比較函式

下表列出了比較函式

函式	描述
min()	確定給定值集中最小值。
max()	確定給定值列表中的最大值。
clamp()	計算最小值、中間值和最大值之間的中間值。

階梯值函式

下表列出了階梯值函式

函式	描述
round()	根據舍入策略計算舍入後的數字。

三角函式

下表列出了三角函式

函式	描述
sin()	計算數字的三角正弦。
cos()	計算數字的三角餘弦。
tan()	計算數字的三角正切。
asin()	計算數字的三角反正弦。
acos()	計算數字的三角反餘弦。
atan()	計算數字的三角反正切。
atan2()	計算平面上兩個數字的三角反正切。

濾鏡函式

CSS 資料型別 <filter-function> 表示能夠更改輸入影像外觀的圖形效果。它用於 filter 和 backdrop-filter 屬性中。

函式	描述
blur()	增加影像的高斯模糊。
brightness()	使影像變亮或變暗。
contrast()	增加或減少影像對比度。
drop-shadow()	在影像後面應用投影。
grayscale()	將影像轉換為灰度。
hue-rotate()	更改影像的整體色調。
invert()	反轉影像的顏色。
opacity()	為影像新增透明度。
saturate()	更改影像的整體飽和度。
sepia()	增加影像的褐色調。

顏色函式

CSS 資料型別 <color> 定義了表示顏色的各種方法。

函式	描述
rgb()	根據其紅色、綠色、藍色和 alpha（透明度）分量指定給定顏色。
hsl()	根據其色相、飽和度、亮度和 alpha（透明度）分量指定給定顏色。
hwb()	根據其色相、白色和黑色分量指定給定顏色。
lch()	根據其亮度、彩度和色相分量指定給定顏色。
oklch()	根據顏色的亮度、彩度、色相和 Alpha（透明度）分量指定給定顏色。
lab()	根據 Lab 顏色空間中的亮度、a 軸距離和 b 軸距離指定給定顏色。
oklab()	根據 Lab 顏色空間中的亮度、a 軸距離、b 軸距離和 Alpha（透明度）指定給定顏色。
color()	指定特定的顏色空間，而不是隱式的 sRGB 顏色空間。
color-mix()	在給定的顏色空間中，按給定的量混合兩個顏色值。

影像函式

CSS 資料型別 <image> 提供影像或漸變的圖形表示。

漸變函式

下表列出了漸變函式

函式	描述
linear-gradient()	線性漸變沿著一條假想的線逐漸過渡顏色。
radial-gradient()	徑向漸變從中心點（原點）逐漸過渡顏色。
conic-gradient()	圓錐漸變圍繞圓圈逐漸過渡顏色。
repeating-linear-gradient()	類似於 linear-gradient() 並採用相同的引數，但它在所有方向上無限重複顏色停止，以覆蓋其整個容器。
repeating-radial-gradient()	類似於 radial-gradient() 並採用相同的引數，但它在所有方向上無限重複顏色停止，以覆蓋其整個容器。
repeating-conic-gradient()	類似於 conic-gradient() 並採用相同的引數，但它在所有方向上無限重複顏色停止，以覆蓋其整個容器。

影像函式

下表列出了影像函式

函式	描述
image-set()	從給定的集合中選擇最合適的 CSS 影像，主要用於高畫素密度螢幕。
cross-fade()	以定義的透明度混合兩個或多個影像。
paint()	定義使用 PaintWorklet 生成的 <image> 值。

計數器函式

理論上，CSS 計數器函式可以在任何可以使用 <string> 的地方使用，但通常與 content 屬性結合使用。

函式	描述
counter()	返回一個字串，表示如果存在則表示命名計數器的當前值。
counters()	啟用巢狀計數器，返回一個連線的字串，表示如果存在則表示命名計數器的當前值。

形狀函式

CSS 資料型別 <basic-shape> 表示視覺形狀，並在諸如 clip-path、offset-path 和 shape-outside 等屬性中使用。

函式	描述
circle()	定義圓形。
ellipse()	定義橢圓形。
inset()	定義內嵌矩形。
polygon()	定義多邊形。
path()	接受 SVG 路徑字串以啟用形狀的繪製。

引用函式

為了引用在其他地方定義的值，以下函式用作屬性的值。

函式	描述
attr()	使用 HTML 元素上定義的屬性。
env()	使用使用者代理定義的環境變數。
url()	使用指定 URL 中的檔案。
var()	使用自定義屬性值代替另一個屬性值的任何部分。

網格函式

以下函式用於定義 CSS 網格。

函式	描述
fit-content()	根據公式 min(最大尺寸，max(最小尺寸，引數)) 將給定尺寸限制在可用尺寸。
minmax()	定義一個大於或等於 min 且小於或等於 max 的尺寸範圍。
repeat()	表示軌道列表的重複片段，允許大量具有重複模式的列或行。

字型函式

替代字形的使用透過結合使用 CSS 字型函式和 font-variant-alternates 屬性來管理。

函式	描述
stylistic()	此函式使用與數字關聯的特定於字型的名稱啟用某些字元的風格替代。
styleset()	此函式啟用字元組的風格替代。引數是與數字關聯的特定於字型的名稱，例如 ss02。
character-variant()	此函式允許單個字元具有不同的風格變化，這與建立字元集連貫字形的 styleset() 不同。
swash()	此函式使用與數字關聯的特定於字型的名稱啟用花體字形，例如 swsh 2 和 cswh 2。
ornaments()	此函式使用與數字關聯的特定於字型的名稱啟用裝飾，例如花飾和裝飾字形，例如 ornm 2。
annotation()	此函式允許註釋，例如帶圈數字或倒置字元，使用與數字關聯的特定於字型的名稱，例如 nalt 2。

過渡和動畫屬性的值來自以下函式。

緩動函式

函式	描述
linear()	在點之間線性插值的緩動函式。
cubic-bezier()	定義三次貝塞爾曲線的緩動函式。
steps()	沿過渡的指定數量的停止點進行迭代，並在相等的時間長度內顯示每個停止點。

列印頁面