Các hàm giá trị CSS

Cú pháp

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

Cú pháp giá trị bắt đầu bằng tên của hàm, theo sau là dấu ngoặc trái (. Tiếp theo là các đối số, và hàm kết thúc bằng dấu ngoặc phải ).

Hàm có thể nhận nhiều đối số, được định dạng tương tự như các giá trị thuộc tính CSS. Khoảng trắng được cho phép, nhưng là tùy chọn bên trong dấu ngoặc. Trong một số ký pháp hàm, nhiều đối số được phân tách bằng dấu phẩy, trong khi các hàm khác dùng dấu cách.

Hàm biến đổi

Kiểu dữ liệu <transform-function> trong CSS đại diện cho biến đổi ngoại hình. Nó được dùng làm giá trị của thuộc tính transform.

Hàm dịch chuyển

translateX()

Dịch chuyển phần tử theo chiều ngang.

translateY()

Dịch chuyển phần tử theo chiều dọc.

translateZ()

Dịch chuyển phần tử dọc theo trục z.

translate()

Dịch chuyển phần tử trên mặt phẳng 2D.

translate3d()

Dịch chuyển phần tử trong không gian 3D.

Hàm xoay

rotateX()

Xoay phần tử quanh trục ngang.

rotateY()

Xoay phần tử quanh trục dọc.

rotateZ()

Xoay phần tử quanh trục z.

rotate()

Xoay phần tử quanh một điểm cố định trên mặt phẳng 2D.

rotate3d()

Xoay phần tử quanh một trục cố định trong không gian 3D.

Hàm tỷ lệ

scaleX()

Phóng to hoặc thu nhỏ phần tử theo chiều ngang.

scaleY()

Phóng to hoặc thu nhỏ phần tử theo chiều dọc.

scaleZ()

Phóng to hoặc thu nhỏ phần tử dọc theo trục z.

scale()

Phóng to hoặc thu nhỏ phần tử trên mặt phẳng 2D.

scale3d()

Phóng to hoặc thu nhỏ phần tử trong không gian 3D.

Hàm nghiêng

skewX()

Nghiêng phần tử theo chiều ngang.

skewY()

Nghiêng phần tử theo chiều dọc.

skew()

Nghiêng phần tử trên mặt phẳng 2D.

Hàm ma trận

matrix()

Mô tả ma trận biến đổi 2D đồng nhất.

matrix3d()

Mô tả biến đổi 3D dưới dạng ma trận đồng nhất 4×4.

Hàm phối cảnh

perspective()

Đặt khoảng cách giữa người dùng và mặt phẳng z=0.

Hàm toán học

Các hàm toán học cho phép viết các giá trị số CSS dưới dạng biểu thức toán học.

Mỗi trang bên dưới chứa thông tin chi tiết về cú pháp, dữ liệu tương thích trình duyệt, ví dụ, và nhiều thông tin khác của một hàm toán học. Để có phần giới thiệu toàn diện về các hàm toán học CSS, xem Sử dụng hàm toán học CSS.

Số học cơ bản

calc()

Thực hiện các phép tính số học cơ bản trên các giá trị số.

calc-size()

Thực hiện các phép tính trên các giá trị kích thước nội tại như auto, fit-content, và max-content, vốn không được hỗ trợ bởi hàm calc().

Hàm so sánh

min()

Tính giá trị nhỏ nhất trong danh sách các giá trị.

max()

Tính giá trị lớn nhất trong danh sách các giá trị.

clamp()

Tính giá trị trung tâm từ giá trị tối thiểu, trung tâm và tối đa.

Hàm giá trị bậc thang

round()

Tính số đã làm tròn dựa trên chiến lược làm tròn.

mod()

Tính phần dư modulus (cùng dấu với số chia) khi chia một số cho số khác.

progress()

Tính vị trí của một giá trị giữa hai giá trị khác — giá trị bắt đầu và giá trị kết thúc. Kết quả được biểu thị dưới dạng số từ 0 đến 1 đại diện cho tiến trình giữa giá trị bắt đầu và kết thúc.

rem()

Tính phần dư (cùng dấu với số bị chia) khi chia một số cho số khác.

Hàm lượng giác

sin()

Tính sin lượng giác của một số.

cos()

Tính cos lượng giác của một số.

tan()

Tính tan lượng giác của một số.

asin()

Tính arcsin lượng giác của một số.

acos()

Tính arccos lượng giác của một số.

atan()

Tính arctan lượng giác của một số.

atan2()

Tính arctan lượng giác của hai số trong một mặt phẳng.

Hàm mũ

pow()

Tính cơ số lũy thừa của một số.

sqrt()

Tính căn bậc hai của một số.

hypot()

Tính căn bậc hai của tổng bình phương các đối số của nó.

log()

Tính logarithm của một số.

exp()

Tính e lũy thừa của một số.

Hàm liên quan đến dấu

abs()

Tính giá trị tuyệt đối của một số.

sign()

Tính dấu (dương hoặc âm) của số.

Hàm bộ lọc

Kiểu dữ liệu <filter-function> trong CSS đại diện cho hiệu ứng đồ họa có thể thay đổi ngoại hình của hình ảnh đầu vào. Nó được dùng trong các thuộc tính filter và backdrop-filter.

blur()

Tăng độ mờ Gaussian của hình ảnh.

brightness()

Làm sáng hoặc tối hình ảnh.

contrast()

Tăng hoặc giảm độ tương phản của hình ảnh.

drop-shadow()

Áp dụng bóng đổ phía sau hình ảnh.

grayscale()

Chuyển đổi hình ảnh sang thang xám.

hue-rotate()

Thay đổi màu tổng thể của hình ảnh.

invert()

Đảo ngược màu sắc của hình ảnh.

opacity()

Thêm độ trong suốt vào hình ảnh.

saturate()

Thay đổi độ bão hòa tổng thể của hình ảnh.

sepia()

Tăng màu sepia của hình ảnh.

Hàm màu sắc

Kiểu dữ liệu <color> trong CSS chỉ định các biểu diễn màu sắc khác nhau.

rgb()

Xác định màu sắc đã cho theo các thành phần đỏ, xanh lá, xanh lam và alpha (độ trong suốt) của nó.

hsl()

Xác định màu sắc đã cho theo các thành phần màu sắc, độ bão hòa, độ sáng và alpha (độ trong suốt) của nó.

hwb()

Xác định màu sắc đã cho theo các thành phần màu sắc, độ trắng và độ đen của nó.

lch()

Xác định màu sắc đã cho theo các thành phần độ sáng, độ màu và màu sắc của nó.

oklch()

Xác định màu sắc đã cho theo các thành phần độ sáng, độ màu, màu sắc và alpha (độ trong suốt) của nó.

lab()

Xác định màu sắc đã cho theo độ sáng, khoảng cách trục a và khoảng cách trục b trong không gian màu Lab.

oklab()

Xác định màu sắc đã cho theo độ sáng, khoảng cách trục a, khoảng cách trục b trong không gian màu Lab và alpha (độ trong suốt).

color()

Chỉ định một không gian màu cụ thể thay vì không gian màu sRGB ngầm định.

color-mix()

Pha trộn hai giá trị màu sắc trong một không gian màu đã cho theo lượng đã cho.

contrast-color()

Trả về màu có độ tương phản màu tối đa cho một màu đã cho.

device-cmyk()

Xác định màu CMYK theo cách phụ thuộc thiết bị.

light-dark()

Trả về một trong hai màu sắc được cung cấp dựa trên bảng màu hiện tại.

dynamic-range-limit-mix()

Tạo giới hạn độ sáng tối đa tùy chỉnh là sự pha trộn của các từ khóa dynamic-range-limit khác nhau theo tỷ lệ phần trăm đã chỉ định.

Hàm hình ảnh

Kiểu dữ liệu <image> trong CSS cung cấp biểu diễn đồ họa của hình ảnh hoặc gradient.

Hàm gradient

linear-gradient()

Gradient tuyến tính chuyển đổi màu dần dần dọc theo một đường thẳng tưởng tượng.

radial-gradient()

Gradient xuyên tâm chuyển đổi màu dần dần từ một điểm trung tâm (điểm gốc).

conic-gradient()

Gradient hình nón chuyển đổi màu dần dần xung quanh một vòng tròn.

repeating-linear-gradient()

Tương tự như linear-gradient() và nhận các đối số giống nhau, nhưng nó lặp lại các điểm dừng màu vô hạn theo mọi hướng để bao phủ toàn bộ vùng chứa.

repeating-radial-gradient()

Tương tự như radial-gradient() và nhận các đối số giống nhau, nhưng nó lặp lại các điểm dừng màu vô hạn theo mọi hướng để bao phủ toàn bộ vùng chứa.

repeating-conic-gradient()

Tương tự như conic-gradient() và nhận các đối số giống nhau, nhưng nó lặp lại các điểm dừng màu vô hạn theo mọi hướng để bao phủ toàn bộ vùng chứa.

Hàm hình ảnh

image()

Xác định <image> theo cách tương tự như kiểu <url>, nhưng với tính năng bổ sung bao gồm chỉ định hướng của hình ảnh và hình ảnh dự phòng khi hình ảnh ưa thích không được hỗ trợ.

image-set()

Chọn hình ảnh CSS phù hợp nhất từ một tập hợp đã cho, chủ yếu cho màn hình có mật độ pixel cao.

cross-fade()

Pha trộn hai hoặc nhiều hình ảnh với độ trong suốt đã xác định.

element()

Xác định giá trị <image> được tạo ra từ một phần tử HTML tùy ý.

paint()

Xác định giá trị <image> được tạo ra bằng PaintWorklet.

Hàm đếm

Các hàm đếm CSS thường được dùng với thuộc tính content, mặc dù về lý thuyết, chúng có thể được dùng bất cứ nơi nào <string> được hỗ trợ.

counter()

Trả về một chuỗi đại diện cho giá trị hiện tại của bộ đếm được đặt tên nếu có.

counters()

Cho phép các bộ đếm lồng nhau, trả về một chuỗi nối đại diện cho các giá trị hiện tại của các bộ đếm được đặt tên, nếu có.

symbols()

Xác định kiểu bộ đếm nội tuyến, trực tiếp là giá trị của một thuộc tính.

Hàm hình dạng

Hình dạng cơ bản

Kiểu dữ liệu <basic-shape> trong CSS đại diện cho một hình dạng đồ họa. Nó được dùng trong các thuộc tính clip-path, offset-path, và shape-outside.

circle()

Xác định hình dạng hình tròn.

ellipse()

Xác định hình dạng hình ellipse.

inset()

Xác định hình dạng hình chữ nhật lùi vào.

rect()

Xác định hình dạng hình chữ nhật sử dụng khoảng cách từ các cạnh trên và trái của hộp tham chiếu.

xywh()

Xác định hình dạng hình chữ nhật sử dụng các khoảng cách được chỉ định từ các cạnh trên và trái của hộp tham chiếu cùng với chiều rộng và chiều cao của hình chữ nhật.

polygon()

Xác định hình dạng đa giác.

path()

Chấp nhận chuỗi đường dẫn SVG để cho phép vẽ một hình dạng.

shape()

Chấp nhận danh sách lệnh phân tách bằng dấu phẩy xác định hình dạng cần vẽ.

Các hàm hình dạng khác

ray()

Hợp lệ với offset-path; xác định đoạn đường mà phần tử được tạo hoạt ảnh có thể đi theo.

superellipse()

Xác định độ cong của một ellipse; có thể được dùng để chỉ định <corner-shape-value>, được dùng với corner-shape và các thuộc tính thành phần và liên quan của nó.

Hàm tham chiếu

Các hàm sau được dùng làm giá trị của các thuộc tính để tham chiếu đến giá trị được xác định ở nơi khác:

attr()

Sử dụng các thuộc tính được xác định trên phần tử HTML.

env()

Sử dụng biến môi trường do user-agent xác định.

if()

Đặt giá trị thuộc tính có điều kiện tùy thuộc vào kết quả của truy vấn kiểu, truy vấn media, hoặc truy vấn tính năng.

url()

Sử dụng tệp từ URL được chỉ định.

var()

Sử dụng giá trị thuộc tính tùy chỉnh thay vì bất kỳ phần nào của giá trị của một thuộc tính khác.

Hàm grid

Các hàm sau được dùng để xác định CSS grid:

fit-content()

Kẹp kích thước đã cho vào kích thước khả dụng theo công thức min(kích thước tối đa, max(kích thước tối thiểu, đối số)).

minmax()

Xác định phạm vi kích thước lớn hơn hoặc bằng min và nhỏ hơn hoặc bằng max.

repeat()

Đại diện cho một đoạn lặp lại của danh sách track, cho phép số lượng lớn các cột hoặc hàng thể hiện một mẫu lặp đi lặp lại.

Hàm phông chữ

Các hàm phông chữ CSS được dùng với thuộc tính font-variant-alternates để kiểm soát việc sử dụng các ký tự thay thế.

stylistic()

Bật các kiểu thay thế cho từng ký tự. Tham số là tên phông chữ cụ thể được ánh xạ tới một số. Nó tương ứng với giá trị OpenType salt, như salt 2.

styleset()

Bật các kiểu thay thế cho tập hợp ký tự. Tham số là tên phông chữ cụ thể được ánh xạ tới một số. Nó tương ứng với giá trị OpenType ssXY, chẳng hạn như ss02.

character-variant()

Bật các kiểu thay thế cụ thể cho ký tự. Nó tương tự như styleset(), nhưng không tạo ra các ký tự nhất quán cho một tập hợp ký tự; các ký tự riêng lẻ sẽ có kiểu dáng độc lập và không nhất thiết phải nhất quán. Tham số là tên phông chữ cụ thể được ánh xạ tới một số. Nó tương ứng với giá trị OpenType cvXY, chẳng hạn như cv02.

swash()

Bật các ký tự swash. Tham số là tên phông chữ cụ thể được ánh xạ tới một số. Nó tương ứng với các giá trị OpenType swsh và cswh, chẳng hạn như swsh 2 và cswh 2.

ornaments()

Bật các trang trí như fleurons và các ký tự dingbat khác. Tham số là tên phông chữ cụ thể được ánh xạ tới một số. Nó tương ứng với giá trị OpenType ornm, chẳng hạn như ornm 2.

annotation()

Bật các chú thích như chữ số có vòng tròn hoặc ký tự đảo ngược. Tham số là tên phông chữ cụ thể được ánh xạ tới một số. Nó tương ứng với giá trị OpenType nalt, chẳng hạn như nalt 2.

Hàm easing

Kiểu dữ liệu <easing-function> trong CSS đại diện cho một hàm toán học. Nó được dùng trong các thuộc tính chuyển đổi và hoạt ảnh:

linear()

Hàm easing nội suy tuyến tính giữa các điểm của nó.

cubic-bezier()

Hàm easing xác định đường cong Bézier bậc ba.

steps()

Lặp dọc theo số điểm dừng được chỉ định trong quá trình chuyển đổi, hiển thị mỗi điểm dừng trong khoảng thời gian bằng nhau.

Hàm hoạt ảnh

Các hàm sau được dùng làm giá trị của các thuộc tính animation-timeline khác nhau:

scroll()

Đặt animation-timeline của phần tử thành timeline tiến trình cuộn ẩn danh.

view()

Đặt animation-timeline của phần tử thành timeline tiến trình xem ẩn danh.

Hàm định vị neo

Các hàm định vị neo được dùng khi định vị và xác định kích thước các phần tử được định vị bằng neo tương đối với vị trí và kích thước của các phần tử neo liên kết với chúng.

anchor()

Trả về độ dài tương đối với vị trí các cạnh của phần tử neo liên kết của phần tử được định vị bằng neo.

anchor-size()

Trả về độ dài tương đối với kích thước của phần tử neo liên kết.

Hàm đếm cây

Các hàm sau trả về giá trị số nguyên dựa trên cây DOM, thay vì cây phẳng như hầu hết các giá trị CSS:

sibling-index()

Trả về số nguyên phản ánh vị trí của phần tử được chọn trong số các phần tử anh chị em của nó.

sibling-count()

Trả về số nguyên phản ánh tổng số phần tử anh chị em, bao gồm cả phần tử được chọn.

Chỉ mục bảng chữ cái của các hàm

• -moz-image-rect() Non-standard Deprecated
• abs()
• acos()
• anchor()
• anchor-size()
• asin()
• atan()
• atan2()
• attr()
• blur()
• brightness()
• calc()
• calc-size() Experimental
• circle()
• clamp()
• color()
• color-mix()
• conic-gradient()
• contrast()
• contrast-color() Experimental
• cos()
• counter()
• counters()
• cross-fade()
• cubic-bezier()
• device-cmyk()
• drop-shadow()
• dynamic-range-limit-mix() Experimental
• element() Experimental
• ellipse()
• env()
• exp()
• fit-content()
• grayscale()
• hsl()
• hue-rotate()
• hwb()
• hypot()
• if() Experimental
• image()
• image-set()
• inset()
• invert()
• lab()
• layer()
• lch()
• light-dark()
• linear()
• linear-gradient()
• log()
• matrix()
• matrix3d()
• max()
• min()
• minmax()
• mod()
• oklab()
• oklch()
• opacity()
• paint()
• palette-mix()
• path()
• perspective()
• polygon()
• pow()
• progress() Experimental
• radial-gradient()
• random()
• ray()
• rect()
• rem()
• repeat()
• repeating-conic-gradient()
• repeating-linear-gradient()
• repeating-radial-gradient()
• rgb()
• rotate()
• rotate3d()
• rotateX()
• rotateY()
• rotateZ()
• round()
• saturate()
• scale()
• scale3d()
• scaleX()
• scaleY()
• scaleZ()
• scroll()
• sepia()
• shape()
• sibling-count() Experimental
• sibling-index() Experimental
• sign()
• sin()
• skew()
• skewx()
• skewy()
• sqrt()
• steps()
• superellipse() Experimental
• symbols()
• tan()
• translate()
• translate3d()
• translateX()
• translateY()
• translateZ()
• type() Experimental
• url()
• var()
• view()
• xywh()

Xem thêm

• Module CSS values and units
• Tìm hiểu: Giá trị và đơn vị