🌅Penjana Kecerunan CSS

Perbezaan antara linear, jejari dan kon

Kecerunan CSS mempunyai 3 fungsi dengan cara perubahan warna yang berbeza, dan kesemuanya digunakan dengan menulis ke harta background.

• linear-gradient：linear-gradient ialah kecerunan linear di mana warna berubah sepanjang garis lurus pada sudut yang ditentukan.
• radial-gradient：radial-gradient ialah kecerunan jejari di mana warna merebak dari kedudukan tengah ke arah luar dalam bentuk bulatan atau elips.
• conic-gradient：conic-gradient ialah kecerunan kon di mana warna berubah sambil berputar mengikut arah jam sekitar kedudukan tengah.

Padanan sudut dan kata kunci arah

Sudut linear-gradient dimulai pada 0deg menunjuk ke atas, dan sudut meningkat mengikut arah jam. Sudut boleh juga ditulis sebagai kata kunci arah seperti 'to right'. 90deg adalah sama dengan 'to right', dan 180deg adalah sama dengan 'to bottom'.

Cara menulis henti warna dan ketelusan

Henti warna (henti warna) ialah kedudukan dalam kecerunan di mana warna menjadi, 0% mewakili titik permulaan dan 100% mewakili titik akhir. Sebagai contoh, '#3B82F6 0%, #8B5CF6 100%' menetapkan perubahan warna daripada biru pada permulaan kepada ungu pada akhir.

• Format #RRGGBB：Format #RRGGBB ialah cara menulis warna di mana intensiti merah, hijau dan biru diwakili oleh 2 digit heksadesimal masing-masing. #FF0000 mewakili merah yang legap.
• Format rgba：Format rgba ialah cara menulis warna yang menggabungkan nilai merah, hijau dan biru (0–255) dengan ketelusan (0–1). Ketelusan 0.5 mewakili warna yang separa telus.