CSS 值函式 - CSS | MDN

語法

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

值語法以函式名開始，後跟一個左括號 (。接下來是引數，函式以右括號 ) 結尾。

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

備註： CSS 值函式被用作屬性值，不應與偽類混淆。函式式偽類、語言偽類以及一些樹結構偽類需要引數值，但它們不是值函式。條件 at-rules 規則也不是值函式；括號用於分組。

變換函式

<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(): 對數值執行基本算術計算。
calc-size(): 對固有尺寸值（如 auto、fit-content 和 max-content）進行計算，這些值不受 calc() 函式支援。

比較函式

min(): 計算一組值中的最小值。
max(): 計算一組值中的最大值。
clamp(): 計算一個最小值、一箇中心值和一個最大值中的中間值。

步進值函式

round(): 根據舍入策略計算一個舍入後的數字。
mod(): 計算一個數除以另一個數時的模（與除數符號相同）。
progress(): 計算一個值在另外兩個值（一個起始值和一個結束值）之間的位置。結果表示為 0 到 1 之間的一個數字，代表在起始值和結束值之間的進度。
rem(): 計算一個數除以另一個數時的餘數（與被除數符號相同）。

三角函式

sin(): 計算一個數的三角正弦值。
cos(): 計算一個數的三角餘弦值。
tan(): 計算一個數的三角正切值。
asin(): 計算一個數的三角反正弦值。
acos(): 計算一個數的三角反餘弦值。
atan(): 計算一個數的三角反正切值。
atan2(): 計算平面上兩個數的三角反正切值。

指數函式

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

符號相關函式

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

濾鏡函式

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

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

顏色函式

<color> CSS 資料型別指定了不同的顏色表示法。

rgb(): 根據其紅、綠、藍和 alpha（透明度）分量定義一種給定的顏色。
hsl(): 根據其色相、飽和度、亮度和 alpha（透明度）分量定義一種給定的顏色。
hwb(): 根據其色相、白度和黑度分量定義一種給定的顏色。
lch(): 根據其亮度、色度和色相分量定義一種給定的顏色。
oklch(): 根據其亮度、色度、色相和 alpha（透明度）分量定義一種給定的顏色。
lab(): 根據其在 Lab 色彩空間中的亮度、a 軸距離和 b 軸距離定義一種給定的顏色。
oklab(): 根據其在 Lab 色彩空間中的亮度、a 軸距離、b 軸距離和 alpha（透明度）定義一種給定的顏色。
color(): 指定一個特定的、指定的色彩空間，而不是隱式的 sRGB 色彩空間。
color-mix(): 在給定的色彩空間中，按給定的量混合兩種顏色值。
contrast-color(): 為給定顏色返回一個具有最大顏色對比度的顏色。
device-cmyk(): 以裝置相關的方式定義 CMYK 顏色。
light-dark(): 根據當前的配色方案，從提供的兩種顏色中返回一種。
dynamic-range-limit-mix(): 建立一個自定義的最大亮度限制，該限制是按指定百分比混合不同的 dynamic-range-limit 關鍵字的結果。

影像函式

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

漸變函式

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(): 直接以內聯方式定義計數器樣式，作為屬性的值。

形狀函式

基本形狀

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

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

其他形狀函式

ray(): 與 offset-path 一起使用；定義動畫元素可以遵循的線段。
superellipse(): 定義橢圓的曲率；可用於指定一個 <corner-shape-value>，與 corner-shape 及其組成屬性和相關屬性一起使用。

引用函式

以下函式用作屬性的值，以引用在別處定義的值。

attr(): 使用在 HTML 元素上定義的屬性。
env(): 使用定義為環境變數的使用者代理值。
if(): 根據樣式查詢、媒體查詢或特性查詢的結果有條件地設定屬性值。
url(): 使用指定 URL 的檔案。
var(): 使用自定義屬性值來代替另一屬性值的任何部分。

網格函式

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

fit-content(): 根據公式 min(最大尺寸, max(最小尺寸, 引數)) 將給定尺寸限制在可用尺寸內。
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。