CSS 值函式

CSS 值函式是用於呼叫特殊資料處理或計算以返回 CSS 值的語句。CSS 值函式表示更復雜的資料型別，並且它們可能需要一些輸入引數來計算返回值。

語法

css

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

值語法以函式名稱開頭，後跟左括號 (。接下來是引數，函式以右括號 ) 結束。

函式可以接受多個引數，這些引數的格式類似於 CSS 屬性值。允許使用空格，但在括號內是可選的。在某些函式表示法中，多個引數用逗號分隔，而在其他情況下則使用空格。

注意：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 數值寫成數學表示式。

以下每個頁面都包含有關數學函式語法、瀏覽器相容性資料、示例等的詳細資訊。有關 CSS 數學函式的整體介紹，請參閱使用 CSS 數學函式。

基本算術

calc(): 對數值執行基本算術運算。

比較函式

min(): 計算值列表中最小的值。
max(): 計算值列表中最大的值。
clamp(): 計算最小值、中間值和最大值的中心值。

階梯值函式

round(): 根據舍入策略計算舍入後的數字。
mod(): 計算一個數除以另一個數時的模數（與除數符號相同）。
rem(): 計算一個數除以另一個數時的餘數（與被除數符號相同）。

三角函式

計算數字的三角正弦。

計算數字的三角餘弦。

計算數字的三角正切。

計算數字的反三角正弦。

計算數字的反餘弦三角函式。

計算數字的反正切三角函式。

計算平面內兩個數字的反正切三角函式。

指數函式

pow(): 計算底數的某個次冪。
sqrt(): 計算數字的平方根。
hypot(): 計算其引數的平方和的平方根。
log(): 計算數字的對數。
exp(): 計算e的某個次冪。

與符號相關的函式

abs(): 計算數字的絕對值。
sign(): 計算數字的符號（正或負）。

過濾器函式

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(): 按給定量混合給定顏色空間中的兩個顏色值。
color-contrast(): 從顏色列表中選擇與基礎顏色值對比度最高的顏色。
device-cmyk(): 以裝置相關的形式定義 CMYK 顏色。
light-dark(): 根據當前顏色方案返回兩個提供的顏色之一。

影像函式

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

漸變函式

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

影像函式

image(): 以類似於`url()` 函式的方式定義`<image>`，但增加了其他功能，包括指定影像的方向性和首選影像不支援時的後備影像。
image-set(): 從給定集中選擇最合適的 CSS 影像，主要用於高畫素密度螢幕。
cross-fade(): 以定義的透明度混合兩個或多個影像。
element(): 定義從任意 HTML 元素生成的`<image>` 值。
paint(): 定義使用 PaintWorklet 生成的`<image>` 值。

計數器函式

CSS 計數器函式通常與`content` 屬性一起使用，儘管理論上，它們可以在任何支援`<string>` 的地方使用。

counter(): 返回一個字串，表示如果存在則表示命名計數器的當前值。
counters(): 啟用巢狀計數器，返回一個連線的字串，表示如果存在則表示命名計數器的當前值。
symbols(): 內聯定義計數器樣式，直接作為屬性的值。

形狀函式

CSS 的`<basic-shape>` 資料型別表示圖形形狀。它用於`clip-path`、`offset-path` 和 `shape-outside` 屬性。

circle(): 定義圓形形狀。
ellipse(): 定義橢圓形形狀。
inset(): 定義內嵌矩形形狀。
rect(): 使用參考框頂部和左側邊緣的距離定義矩形形狀。
xywh(): 使用參考框頂部和左側邊緣的指定距離以及矩形寬度和高度定義矩形形狀。
polygon(): 定義多邊形形狀。
path(): 接受 SVG 路徑字串以啟用形狀繪製。
shape(): 接受一個逗號分隔的命令列表，定義要繪製的形狀。

參考函式

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

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

網格函式

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

fit-content(): 根據公式min(maximum size, max(minimum size, argument))將給定大小限制為可用大小。
minmax(): 定義一個大於或等於min且小於或等於max的大小範圍。
repeat(): 表示軌道列表的重複片段，允許大量具有重複模式的列或行。

字型函式

CSS 字型函式與`font-variant-alternates` 屬性一起使用，以控制備用字形的用法。

stylistic(): 啟用單個字元的樣式備選方案。引數是對映到數字的特定於字型的名稱。它對應於 OpenType 值salt，例如salt 2。
styleset(): 啟用字元集的樣式備選方案。引數是對映到數字的特定於字型的名稱。它對應於 OpenType 值ssXY，例如ss02。
character-variant(): 啟用字元的特定樣式備選方案。它類似於styleset()，但不會為一組字元建立連貫的字形；單個字元將具有獨立且不一定連貫的樣式。引數是對映到數字的特定於字型的名稱。它對應於 OpenType 值cvXY，例如cv02。
swash(): 啟用`連筆` 字形。引數是對映到數字的特定於字型的名稱。它對應於 OpenType 值swsh 和cswh，例如swsh 2 和cswh 2。
ornaments(): 啟用裝飾，例如`花飾` 和其他裝飾字形。引數是對映到數字的特定於字型的名稱。它對應於 OpenType 值ornm，例如ornm 2。
annotation(): 啟用註釋，例如帶圓圈的數字或倒置字元。引數是對映到數字的特定於字型的名稱。它對應於 OpenType 值nalt，例如nalt 2。

緩動函式

以下函式用作過渡和動畫屬性的值。

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

動畫函式

以下函式用作不同的animation-timeline屬性的值。有關這些的更多詳細資訊，請參見`animation-timeline`。

scroll(): 將元素的`animation-timeline` 設定為匿名滾動進度時間線。
view(): 將元素的`animation-timeline` 設定為匿名檢視進度時間線。

錨點定位函式

錨點定位函式用於相對於其關聯的錨點元素的位置和大小來定位和調整錨點定位元素的大小。

anchor(): 返回相對於錨點定位元素的關聯錨點元素邊緣位置的長度。
anchor-size(): 返回相對於關聯錨點元素大小的長度。