Fungsi CSS diterangkan

62 of 62 rows


Saiz dan matematik
	Hasil satu ungkapan aritmetik, dengan unit bercampur.	width: calc(100% - 2rem);
	Nilai terkecil daripada nilai yang diberikan.	width: min(100%, 60ch);
	Nilai terbesar daripada nilai yang diberikan.	width: max(320px, 40vw);
	Nilai yang dihadkan antara minimum, pilihan, dan maksimum.	font-size: clamp(1rem, 2vw, 1.5rem);
	Membaca pemboleh ubah persekitaran yang disediakan oleh user agent.	padding: env(safe-area-inset-top);
	Saiz yang dibatasi kepada lebar intrinsik kandungan.	width: fit-content(200px);
	Membundarkan satu nilai ke gandaan terdekat bagi nilai lain.	width: round(up, 133px, 50px);
	Baki bahagi positif, sentiasa tak-negatif.	margin: mod(100px, 30px);
	Baki bahagi, mengekalkan tanda nombor yang dibahagi.	margin: rem(-100px, 30px);
	Nilai mutlak.	translateX(abs(-10px));
	-1, 0, atau 1, mengikut tanda nilai.	padding: sign(-5px) * 10px;
Grid
	Julat saiz untuk trek grid, antara minimum dan maksimum.	grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr);
	Mengulang corak trek beberapa kali atau sehingga penuh.	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
Logik dan syarat
	Memilih satu daripada dua nilai berdasarkan satu syarat.	font-size: if(media(width > 600px), 1.25rem, 1rem);
	Benar apabila media query sepadan, untuk digunakan dalam if().	padding: if(media(width > 40rem), 2rem, 1rem);
	Benar apabila pelayar menyokong satu pengisytiharan, untuk digunakan dalam if().	display: if(supports(color: oklch(0 0 0)), oklch(0 0 0), #333);
	Benar apabila selector sepadan, untuk digunakan dalam if().	font-weight: if(selector(:hover), 700, 400);
Properti tersuai
	Nilai bagi satu properti tersuai, dengan fallback pilihan.	color: var(--accent, #333);
Warna
	Warna daripada saluran merah, hijau, biru (dan alfa).	color: rgb(59 130 246 / 0.8);
	Warna daripada hue, saturasi, dan lightness.	color: hsl(210 80% 50%);
	Warna dalam ruang persepsi OKLCH (lightness konsisten).	color: oklch(0.7 0.15 250);
	Campuran dua warna dalam ruang warna tertentu.	color: color-mix(in srgb, red 40%, blue);
	Pilihan daripada senarai yang kontras paling baik dengan warna asas.	color: color-contrast(#fff vs #000, #777);
	Warna daripada hue, keputihan, dan kehitaman.	color: hwb(210 10% 20%);
	Warna dalam ruang CIELAB (lightness, paksi a dan b).	color: lab(52% 40 59);
	Warna dalam ruang CIELAB (lightness, chroma, hue).	color: lch(52% 49 24);
	Warna dalam mana-mana ruang warna pratakrif, mengikut koordinat.	color: color(display-p3 1 0.4 0.2);
	Warna pertama pada skema cerah, warna kedua pada skema gelap.	color: light-dark(#1a1a1a, #f5f5f5);
Gradien dan imej
	Gradien sepanjang garis lurus antara color stop.	background: linear-gradient(90deg, #4b9fff, #2ee6a6);
	Gradien yang memancar keluar daripada satu titik.	background: radial-gradient(circle, #fff, #000);
	Gradien yang menyapu mengelilingi satu titik pusat.	background: conic-gradient(red, yellow, red);
	Memuatkan sumber luaran: imej, fon, atau SVG.	background-image: url(hero.webp);
	Memilih imej terbaik bagi resolusi peranti.	background-image: image-set("hero.webp" 1x, "hero@2x.webp" 2x);
	Mencampur dua imej pada peratusan tertentu.	background-image: cross-fade(30%, url(a.webp), url(b.webp));
Penapis dan bentuk
	Penapis piksel yang digunakan dalam properti filter.	filter: blur(4px) brightness(1.1);
	Rentetan path SVG, digunakan untuk melukis clip atau bentuk.	clip-path: path('M10 10 H 90 V 90 Z');
	Membaca atribut HTML; penggunaannya terhad di luar content.	content: attr(data-label);
	Melaraskan kontras elemen.	filter: contrast(1.4);
	Melukis bayang yang mengikuti bentuk alfa elemen.	filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.3));
	Menukar elemen kepada grayscale.	filter: grayscale(100%);
	Membalikkan warna elemen.	filter: invert(1);
	Menerapkan ton sepia.	filter: sepia(0.6);
	Memutar hue warna elemen.	filter: hue-rotate(90deg);
	Menetapkan kelegapan elemen melalui filter.	filter: opacity(0.5);
	Bentuk bulatan untuk clip-path atau shape-outside.	clip-path: circle(40% at 50% 50%);
	Bentuk elips untuk clip-path atau shape-outside.	clip-path: ellipse(50% 35% at 50% 50%);
	Bentuk segi empat tepat bersudut bulat untuk clip-path.	clip-path: inset(10px 10px 10px 10px round 8px);
	Bentuk poligon daripada senarai titik.	clip-path: polygon(50% 0, 100% 100%, 0 100%);
Transformasi
	Menggerakkan elemen sepanjang X dan Y.	transform: translate(10px, 20px);
	Memutar elemen pada pusatnya.	transform: rotate(45deg);
	Menskalakan elemen sepanjang X dan Y.	transform: scale(1.25);
	Memiringkan elemen sepanjang X dan Y.	transform: skew(10deg, 0deg);
	Satu transformasi 2D daripada enam nilai matriks.	transform: matrix(1, 0, 0.5, 1, 10, 0);
	Menetapkan kedalaman perspektif 3D bagi anak elemen.	transform: perspective(600px) rotateY(20deg);
Animasi dan pembilang
	Lengkung easing daripada empat titik kawalan.	transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
	Easing yang melompat dalam langkah yang sama.	animation-timing-function: steps(8, end);
	Nilai semasa pembilang CSS, sebagai kandungan.	content: counter(chapter);
	Nilai satu pembilang beserta semua leluhurnya, disatukan dengan rentetan.	content: counters(item, ".");
	0 hingga 1 apabila satu nilai bergerak antara permulaan dan penghujung.	opacity: progress(scroll(), 0, 50vh);
	Nombor rawak daripada satu julat, tetap bagi setiap elemen.	rotate: random(from -5deg to 5deg);
	Sinus bagi satu sudut, untuk ungkapan calc.	translateY(calc(1rem * sin(45deg)));
	Kosinus bagi satu sudut, untuk ungkapan calc.	translateX(calc(1rem * cos(45deg)));