Hàm CSSExplained

62 of 62 rows

Hàm↕	Trả về gì↕	Ví dụ↕
Kích thước và toán học
⤢calc()	Kết quả của một biểu thức số học, với đơn vị hỗn hợp.	width: calc(100% - 2rem);
⤢min()	Giá trị nhỏ nhất trong các giá trị cho trước.	width: min(100%, 60ch);
⤢max()	Giá trị lớn nhất trong các giá trị cho trước.	width: max(320px, 40vw);
⤢clamp()	Một giá trị bị giới hạn giữa mức tối thiểu, mức ưu tiên và mức tối đa.	font-size: clamp(1rem, 2vw, 1.5rem);
⤢env()	Đọc một biến môi trường do user agent cung cấp.	padding: env(safe-area-inset-top);
⤢fit-content()	Kích thước bị kẹp theo chiều rộng nội tại của nội dung.	width: fit-content(200px);
⤢round()	Làm tròn một giá trị tới bội số gần nhất của một giá trị khác.	width: round(up, 133px, 50px);
⤢mod()	Số dư dương của phép chia, luôn không âm.	margin: mod(100px, 30px);
⤢rem()	Số dư của phép chia, giữ dấu của số bị chia.	margin: rem(-100px, 30px);
⤢abs()	Giá trị tuyệt đối.	translateX(abs(-10px));
⤢sign()	-1, 0 hoặc 1, tùy theo dấu của giá trị.	padding: sign(-5px) * 10px;
Grid
⤢minmax()	Một khoảng kích thước cho các track của grid, giữa mức tối thiểu và mức tối đa.	grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr);
⤢repeat()	Lặp một mẫu track một số lần nhất định hoặc cho đến khi lấp đầy.	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
Logic và điều kiện
⤢if()	Chọn một trong hai giá trị dựa trên một điều kiện.	font-size: if(media(width > 600px), 1.25rem, 1rem);
⤢media()	Đúng khi một media query khớp, để dùng bên trong if().	padding: if(media(width > 40rem), 2rem, 1rem);
⤢supports()	Đúng khi trình duyệt hỗ trợ một khai báo, để dùng bên trong if().	display: if(supports(color: oklch(0 0 0)), oklch(0 0 0), #333);
⤢selector()	Đúng khi selector khớp, để dùng bên trong if().	font-weight: if(selector(:hover), 700, 400);
Thuộc tính tùy chỉnh
⤢var()	Giá trị của một thuộc tính tùy chỉnh, kèm giá trị dự phòng tùy chọn.	color: var(--accent, #333);
Màu
⤢rgb() / rgba()	Một màu từ các kênh đỏ, lục, lam (và alpha).	color: rgb(59 130 246 / 0.8);
⤢hsl() / hsla()	Một màu từ sắc độ, độ bão hòa và độ sáng.	color: hsl(210 80% 50%);
⤢oklch()	Một màu trong không gian cảm nhận OKLCH (độ sáng nhất quán).	color: oklch(0.7 0.15 250);
⤢color-mix()	Một sự pha trộn của hai màu trong một không gian màu cho trước.	color: color-mix(in srgb, red 40%, blue);
⤢color-contrast()	Phương án trong danh sách có độ tương phản tốt nhất với một màu nền.	color: color-contrast(#fff vs #000, #777);
⤢hwb()	Một màu từ sắc độ, độ trắng và độ đen.	color: hwb(210 10% 20%);
⤢lab()	Một màu trong không gian CIELAB (độ sáng, hai trục a và b).	color: lab(52% 40 59);
⤢lch()	Một màu trong không gian CIELAB (độ sáng, croma, sắc độ).	color: lch(52% 49 24);
⤢color()	Một màu trong bất kỳ không gian màu định sẵn nào, theo tọa độ.	color: color(display-p3 1 0.4 0.2);
⤢light-dark()	Màu thứ nhất ở giao diện sáng, màu thứ hai ở giao diện tối.	color: light-dark(#1a1a1a, #f5f5f5);
Gradient và hình ảnh
⤢linear-gradient()	Một gradient dọc theo một đường thẳng giữa các điểm dừng màu.	background: linear-gradient(90deg, #4b9fff, #2ee6a6);
⤢radial-gradient()	Một gradient tỏa ra bên ngoài từ một điểm.	background: radial-gradient(circle, #fff, #000);
⤢conic-gradient()	Một gradient quét quanh một điểm tâm.	background: conic-gradient(red, yellow, red);
⤢url()	Tải một tài nguyên bên ngoài: hình ảnh, phông chữ hoặc SVG.	background-image: url(hero.webp);
⤢image-set()	Chọn hình ảnh tốt nhất cho độ phân giải của thiết bị.	background-image: image-set("hero.webp" 1x, "hero@2x.webp" 2x);
⤢cross-fade()	Pha trộn hai hình ảnh theo một phần trăm cho trước.	background-image: cross-fade(30%, url(a.webp), url(b.webp));
Bộ lọc và hình dạng
⤢blur() / brightness() / saturate()	Các bộ lọc ảnh dùng bên trong thuộc tính filter.	filter: blur(4px) brightness(1.1);
⤢path()	Một chuỗi đường dẫn SVG, dùng để vẽ clip hoặc hình dạng.	clip-path: path('M10 10 H 90 V 90 Z');
⤢attr()	Đọc một thuộc tính HTML; hạn chế dùng ngoài content.	content: attr(data-label);
⤢contrast()	Điều chỉnh độ tương phản của phần tử.	filter: contrast(1.4);
⤢drop-shadow()	Vẽ một bóng đổ bám theo hình dạng alpha của phần tử.	filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.3));
⤢grayscale()	Chuyển phần tử sang thang độ xám.	filter: grayscale(100%);
⤢invert()	Đảo ngược các màu của phần tử.	filter: invert(1);
⤢sepia()	Áp dụng một tông màu nâu cũ.	filter: sepia(0.6);
⤢hue-rotate()	Xoay sắc độ của các màu trong phần tử.	filter: hue-rotate(90deg);
⤢opacity()	Đặt độ mờ đục của phần tử thông qua filter.	filter: opacity(0.5);
⤢circle()	Một hình tròn dùng cho clip-path hoặc shape-outside.	clip-path: circle(40% at 50% 50%);
⤢ellipse()	Một hình elip dùng cho clip-path hoặc shape-outside.	clip-path: ellipse(50% 35% at 50% 50%);
⤢inset()	Một hình chữ nhật bo góc dùng cho clip-path.	clip-path: inset(10px 10px 10px 10px round 8px);
⤢polygon()	Một hình đa giác từ một danh sách các điểm.	clip-path: polygon(50% 0, 100% 100%, 0 100%);
Biến đổi
⤢translate()	Di chuyển phần tử dọc theo X và Y.	transform: translate(10px, 20px);
⤢rotate()	Xoay phần tử quanh tâm của nó.	transform: rotate(45deg);
⤢scale()	Phóng to hoặc thu nhỏ phần tử dọc theo X và Y.	transform: scale(1.25);
⤢skew()	Nghiêng phần tử dọc theo X và Y.	transform: skew(10deg, 0deg);
⤢matrix()	Một phép biến đổi 2D từ sáu giá trị ma trận.	transform: matrix(1, 0, 0.5, 1, 10, 0);
⤢perspective()	Đặt chiều sâu phối cảnh 3D cho các phần tử con.	transform: perspective(600px) rotateY(20deg);
Hoạt ảnh và bộ đếm
⤢cubic-bezier()	Một đường cong easing từ bốn điểm điều khiển.	transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
⤢steps()	Một easing nhảy theo các bước bằng nhau.	animation-timing-function: steps(8, end);
⤢counter()	Giá trị hiện tại của một bộ đếm CSS, dùng làm nội dung.	content: counter(chapter);
⤢counters()	Giá trị của một bộ đếm và của tất cả bộ đếm cha của nó, nối với nhau bằng một chuỗi.	content: counters(item, ".");
⤢progress()	Từ 0 tới 1 khi một giá trị tiến triển giữa điểm bắt đầu và điểm kết thúc.	opacity: progress(scroll(), 0, 50vh);
⤢random()	Một số ngẫu nhiên trong một khoảng, cố định cho từng phần tử.	rotate: random(from -5deg to 5deg);
⤢sin()	Sin của một góc, cho các biểu thức calc.	translateY(calc(1rem * sin(45deg)));
⤢cos()	Cos của một góc, cho các biểu thức calc.	translateX(calc(1rem * cos(45deg)));