Sách tham khảo hàm CSS

Hàm CSS

Hàm CSS có thể được sử dụng để tính toán giá trị, thao tác chuỗi hoặc màu sắc, tạo các dải màu và hình dạng phức tạp.

Hàm CSS thường được sử dụng làm giá trị của các thuộc tính CSS khác nhau.

Hàm Mô tả
acos() Trả về giá trị反正cos của số giữa -1 và 1.
asin() Trả về giá trị反正弦 của số giữa -1 và 1.
atan() Trả về giá trị反正切 của số giữa -∞ và ∞.
atan2() Trả về giá trị反正切 của hai giá trị giữa -∞ và ∞.
attr() Trả về giá trị thuộc tính của yếu tố đã chọn.
blur() Áp dụng hiệu ứng mờ lên yếu tố.
brightness() Điều chỉnh độ sáng của yếu tố (sáng hơn hoặc tối hơn).
calc() Cho phép tính toán để xác định giá trị thuộc tính CSS.
circle() Định nghĩa hình tròn.
clamp() Đặt một giá trị sẽ được điều chỉnh từ giá trị tối thiểu đến giá trị tối đa dựa trên kích thước của khung nhìn.
color() Cho phép chỉ định màu trong không gian màu cụ thể.
color-mix() Trộn hai giá trị màu theo tỷ lệ đã cho trong không gian màu.
conic-gradient() Tạo dải màu tròn.
contrast() Điều chỉnh độ tương phản của yếu tố.
cos() Trả về giá trị cosinus của góc.
counter() Trả về giá trị hiện tại của bộ đếm có tên.
counters() Trả về giá trị hiện tại của bộ đếm có tên và đệm.
cubic-bezier() Định nghĩa đường Bezier ba điểm.
drop-shadow() Áp dụng hiệu ứng chiếu ảnh lên hình ảnh.
ellipse() Định nghĩa hình tròn elip.
exp() Trả về giá trị x^n của E (Ex)
fit-content() Cho phép điều chỉnh kích thước của yếu tố dựa trên nội dung.
grayscale() Chuyển đổi hình ảnh thành màu xám.
hsl() / hsla() Định nghĩa màu sử dụng mô hình màu HSL (huesaturation-lightness); tùy chọn bao gồm thành phần alpha.
hue-rotate() Áp dụng màu quay cho yếu tố.
hwb() Định nghĩa màu sử dụng mô hình màu HWB (huesaturation-brightness); tùy chọn bao gồm thành phần alpha.
hypot() Trả về giá trị của bình phương của tổng các tham số.
inset() Định nghĩa hình vuông có khoảng cách trong suốt với mỗi cạnh của khung tham chiếu.
invert() Đảo ngược màu của hình ảnh.
lab() Chỉ định màu trong không gian màu CIE Lab.
lch() Chỉ định màu trong không gian màu LCH (sáng - độ饱和 - độ sáng).
light-dark() Kích hoạt hai giá trị màu, nếu người dùng đã thiết lập chủ đề sáng, trả về giá trị đầu tiên;
Trả về giá trị thứ hai nếu người dùng đã thiết lập chủ đề tối.
linear-gradient() Tạo biến đổi màu trục tuyến tính.
log() Trả về giá trị tự nhiên của số (x) (dưới cơ số E) hoặc logarit của cơ số.
matrix() Định nghĩa biến đổi 2D sử dụng ma trận sáu giá trị.
matrix3d() Định nghĩa biến đổi 3D sử dụng ma trận 4x4.
max() Sử dụng giá trị lớn nhất trong danh sách giá trị phân隔 bằng dấu phẩy làm giá trị thuộc tính.
min() Sử dụng giá trị nhỏ nhất trong danh sách giá trị phân隔 bằng dấu phẩy làm giá trị thuộc tính.
minmax() Định nghĩa phạm vi kích thước từ giá trị nhỏ nhất đến giá trị lớn nhất (dùng cho CSS lưới).
mod() Trả về giá trị dư sau khi chia một số cho một số khác.
oklab() Chỉ định màu trong không gian màu OKLAB.
oklch() Chỉ định màu trong không gian màu OKLCH.
opacity() Áp dụng hiệu ứng không mờ cho yếu tố.
perspective() Định nghĩa góc nhìn thuần túy cho yếu tố 3D.
polygon() Định nghĩa đa giác.
pow() Trả về giá trị của số (x) được nhân với số (y) lần.
radial-gradient() Tạo biến đổi màu trục径向.
ray() Định nghĩa đoạn đường theo hướng di chuyển của yếu tố động.
rem() Trả về giá trị dư sau khi chia một số cho một số khác.
repeat() Lặp lại một nhóm cột hoặc hàng trong lưới.
repeating-conic-gradient() Lặp lại biến đổi màu trục锥.
repeating-linear-gradient() Lặp lại biến đổi màu trục tuyến tính.
repeating-radial-gradient() Lặp lại biến đổi màu trục径向.
rgb() / rgba() Định nghĩa màu bằng mô hình红-绿-蓝 (RGB); có thể bao gồm thành phần alpha.
rotate() Định nghĩa quay 2D của phần tử.
rotate3d() Định nghĩa quay 3D của phần tử.
rotateX() Định nghĩa quay 3D của phần tử xung quanh trục x (đọc).
rotateY() Định nghĩa quay 3D của phần tử xung quanh trục y (ngang).
rotateZ() Định nghĩa quay 3D của phần tử xung quanh trục z.
round() Làm tròn số theo chiến lược舍入 được chỉ định.
saturate() Chỉnh độ饱 màu của phần tử (mức độ mạnh của màu).
scale() Định nghĩa co giãn 2D của phần tử.
scale3d() Định nghĩa co giãn 3D của phần tử.
scaleX() Co giãn phần tử theo chiều ngang (chiều rộng).
scaleY() Co giãn phần tử theo chiều dọc (chiều cao).
sepia() Chuyển đổi hình ảnh thành tông nâu.
sin() Trả về giá trị sin của số (góc).
skew() Xoay phần tử theo trục x và y.
skewX() Xoay phần tử theo trục x.
skewY() Xoay phần tử theo trục y.
sqrt() Trả về giá trị căn bậc hai của số.
steps() Tạo hàm thời gian bước cho animation.
tan() Trả về giá trị canh của số.
translate() Cho phép di chuyển lại vị trí của phần tử theo trục x và y.
translateX() Cho phép di chuyển lại vị trí của phần tử theo trục x.
translateY() Cho phép di chuyển lại vị trí của phần tử theo trục y.
url() Cho phép bao gồm tệp trong bảng định dạng.
var() Chèn giá trị tùy chỉnh của thuộc tính.