Penjelasan terperinci tentang cara menulis warna kecerunan css

Warna kecerunan CSS ialah teknologi yang biasa digunakan dalam reka bentuk web Ia boleh menjadikan peralihan warna halaman lebih semula jadi, dan juga boleh meningkatkan keindahan dan ekspresi halaman. Biar saya perkenalkan anda cara menulis warna kecerunan CSS.

1. Kecerunan linear

1. Mentakrifkan arah kecerunan

Sebelum mentakrifkan kecerunan linear, anda perlu mempertimbangkan arah kecerunan. Secara lalai, kecerunan linear adalah dari atas ke bawah, iaitu arah menegak, dan arah ini boleh diubah dengan menetapkan nilai sudut.

• Jika anda mahukan kecerunan dalam arah mendatar, anda boleh menetapkan nilai sudut yang sepadan, contohnya, 0 darjah bermakna dari kiri ke kanan, 180 darjah bermakna dari kanan ke kiri, dsb.
• Jika anda mahukan kecerunan pepenjuru, anda boleh menetapkan nilai sudut dengan darjah.

Berikut ialah beberapa contoh nilai sudut:

linear-gradient(0deg, #FFDAB9, #7FFFD4);
linear-gradient(90deg, #FFDAB9, #7FFFD4);
linear-gradient(45deg, #FFDAB9, #7FFFD4);

2. Tentukan warna kecerunan

Tentukan warna kecerunan linear, anda perlu menggunakan linear-gradient()Fungsi.

background: linear-gradient(to right, #FFDAB9, #7FFFD4);

ke kanan bermaksud kecerunan mendatar dari kiri ke kanan, diikuti dengan warna yang anda mahu kecerunan. Jika anda ingin menetapkan kecerunan berbilang warna untuk elemen, anda boleh menulisnya seperti ini:

background: linear-gradient(to right, #FFDAB9, #7FFFD4, #FFDAB9);

2. Kecerunan jejari

Kecerunan jejari agak berbeza daripada kecerunan linear akan bermula dari Mula di tengah dan merebak ke luar sehingga keseluruhan elemen dilindungi. Mentakrifkan kecerunan jejari memerlukan konfigurasi elemen berikut:

1. Bentuk kecerunan

Kecerunan jejari boleh ditetapkan kepada bulatan atau elips untuk mendayakan bentuk yang berbeza .

background: radial-gradient(circle, #FFDAB9, #7FFFD4);
background: radial-gradient(ellipse, #FFDAB9, #7FFFD4);

2. Titik mula dan tamat kecerunan

Kecerunan jejari mempunyai sumber cahaya dan warna disebarkan daripada bulatan yang berbeza jejari daripada sumber cahaya mula terpancar dari. Oleh itu, kita perlu menentukan titik mula dan akhir kecerunan.

background: radial-gradient(at center, #FFDAB9, #7FFFD4);

Gunakan kata kunci at center untuk menetapkan sumber cahaya di tengah elemen.

background: radial-gradient(50% 50%, #FFDAB9, #7FFFD4);

Menggunakan nilai koordinat untuk menentukan kedudukan sumber cahaya boleh mencapai keperluan yang lebih tersuai.

3. Kawal warna kecerunan

Serupa dengan kecerunan linear, kecerunan jejari juga memerlukan penentuan warna kecerunan.

background: radial-gradient(at center, #FFDAB9, #7FFFD4);

Di atas ialah cara menulis warna kecerunan CSS, yang boleh digunakan secara fleksibel mengikut keperluan.

Atas ialah kandungan terperinci Penjelasan terperinci tentang cara menulis warna kecerunan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!