Kecerunan CSS: Kursus Kemalangan Sintaks

kecerunan CSS: Kursus Gradien Crash

Pada masa lalu, kebanyakan laman web menggunakan imej untuk membuat UI yang indah. Terima kasih kepada pelbagai sifat CSS, trend ini telah berubah. Tutorial ini akan membantu anda mempelajari kecerunan CSS. Anda boleh menggantikan pelbagai elemen UI serta imej di latar belakang menggunakan kecerunan. Dengan sedikit amalan, anda boleh membuat corak kompleks tanpa menggunakan sebarang imej.

kecerunan CSS disokong dengan baik dalam penyemak imbas, membolehkan anda membuat peralihan visual yang lancar antara dua atau lebih warna yang ditentukan. Kecerunan membolehkan anda mengawal banyak tetapan seperti saiz, sudut, kedudukan berhenti warna kecerunan, dll.

Dalam artikel ini, saya akan memperkenalkan kecerunan linear, radial, dan baru.

mata utama

kecerunan CSS disokong secara meluas dalam penyemak imbas, yang membolehkan peralihan lancar antara dua atau lebih warna tertentu dan mengawal banyak tetapan seperti saiz, sudut, dan kedudukan berhenti warna.
Kecerunan linear adalah kecerunan yang paling biasa digunakan, beralih dari satu warna ke yang lain di sepanjang garis lurus. Ini boleh dikawal dengan menentukan arah atau sudut.
Warna peralihan kecerunan radial dalam corak bulat atau elips, bermula pada satu titik dan berkembang ke luar. Pelbagai parameter boleh digunakan untuk mengawal bentuk, saiz dan kedudukan kecerunan radial.
Gradien berulang adalah serupa dengan kecerunan lain, tetapi ulangi kedudukan berhenti warna tak terhingga, membolehkan penciptaan corak dan latar belakang kompleks. Mereka mengambil parameter yang sama seperti kecerunan yang tidak berulang.

Gradien Linear

Kecerunan linear adalah kecerunan yang paling biasa digunakan. Nampaknya ini, nilai dalam kurungan menunjukkan jenis nilai:

<code>.example {
  background: linear-gradient(
    [方向], [第一种颜色], [第二种颜色], [更多颜色 ...]
  );
}</code>

Jika anda tidak menentukan orientasi, kecerunan bermula di bahagian atas, dengan intensiti penuh warna pertama, dan kemudian peralihan lancar ke warna terakhir apabila anda sampai ke bawah.

Untuk kawalan lebih lanjut, anda boleh menentukan arah kecerunan. Anda boleh menggunakan istilah mudah (seperti kiri, kanan bawah) untuk melaksanakannya, atau menentukan sudut. Coretan kod berikut mencipta latar belakang dari kiri ke kanan:

<code>.example {
  background: linear-gradient(to right, hotpink, lightpink);
}</code>

Lihat contoh pada codepen:

kecerunan linear kiri ke kanan

Pelayar lama menyokong sintaks yang sedikit berbeza dan memerlukan awalan khusus penyemak imbas. Dalam pelayar yang lebih tua, anda menentukan titik permulaan dan bukannya titik akhir. Kod kecerunan CSS3 pelayar lama adalah seperti berikut:

<code>.example {
    background: -prefix-linear-gradient(left, red, blue);
}</code>

Tentukan sudut untuk kecerunan linear

Jika anda perlu membuat kecerunan pada sudut tertentu, anda boleh menentukan sudut secara langsung. Kod berikut mencipta kecerunan 60 darjah:

<code>.example {
  background: linear-gradient(60deg, red, blue);
}</code>

Rawat garis dari bawah ke atas sebagai sifar, dan jika garis bergerak mengikut arah jam, sudut meningkat. Contohnya:

Ini akan mewujudkan kecerunan dengan merah di bahagian bawah dan biru di bahagian atas. Dan kod berikut akan mewujudkan kecerunan mendatar dengan merah di sebelah kiri dan biru di sebelah kanan:

<code>.example {
  background: linear-gradient(0deg, red, blue);
}</code>

<code>.example {
  background: linear-gradient(
    [方向], [第一种颜色], [第二种颜色], [更多颜色 ...]
  );
}</code>

Lihat contoh pada codepen: kecerunan linear dengan sudut yang berbeza

Nyatakan kedudukan berhenti warna dalam kecerunan linear

Jika anda ingin menukar warna secara tidak sekata, anda boleh menentukan kedudukan berhenti warna sendiri. Kedudukan berhenti warna boleh ditentukan sebagai nilai peratusan atau panjang mutlak. Anda tidak perlu menentukan kedudukan berhenti untuk warna pertama dan terakhir. Warna yang diberikan mempunyai intensiti penuh pada kedudukan warna yang ditentukan. Berikut adalah contoh:

<code>.example {
  background: linear-gradient(to right, hotpink, lightpink);
}</code>

Jika tiada kedudukan berhenti ditentukan, warna akan sama rata.

Lihat contoh pada codepen: kecerunan linear dengan warna berhenti

Kecerunan radial

Kecerunan radial kurang biasa dan lebih kompleks. Ini adalah sintaks kecerunan radial:

<code>.example {
    background: -prefix-linear-gradient(left, red, blue);
}</code>

Apabila tiada apa yang ditentukan, bentuk lalai adalah elips, saiznya adalah sudut paling jauh, dan kedudukannya adalah pusat. Kedudukan berhenti warna ditentukan dengan cara yang sama seperti kecerunan linear. Coretan kod berikut akan menarik kecerunan radial elips:

<code>.example {
  background: linear-gradient(60deg, red, blue);
}</code>

Lihat Contoh pada Codepen: Contoh Gradien Radial

Tukar saiz kecerunan radial

Saiz kecerunan radial ditentukan oleh empat nilai: bahagian paling dekat, paling jauh, paling dekat dan sudut paling jauh. Apabila digunakan dengan nilai bentuk, kata kunci ini menentukan bentuk. Bentuk kecerunan berfungsi apabila kecerunan akan terus melangkaui batas -batas unsur -unsur di mana kecerunan digunakan.

mari kita lihat contoh untuk menjadikannya lebih jelas. Kami akan mencipta empat kecerunan pada empat elemen:

<code>.example {
  background: linear-gradient(0deg, red, blue);
}</code>

Dalam CSS berikut, saya menggunakan empat nilai kata kunci:

<code>.example {
  background: linear-gradient(90deg, red, blue);
}</code>

Lihat contoh pada codepen: kecerunan radial dengan nilai kata kunci saiz yang berbeza

Perhatikan bahawa terdapat perbezaan yang halus tetapi jelas antara setiap kecerunan semasa demo.

Tentukan kedudukan berhenti warna dalam kecerunan radial

Kedudukan berhenti warna dalam kecerunan radial adalah serupa dengan kecerunan linear. Perhatikan bahawa saya juga menentukan kedudukan pusat bulatan sebagai peratusan. Nilai piksel juga boleh digunakan jika dikehendaki. Berikut adalah coretan kod untuk menunjukkan ini:

<code>.example {
  background: linear-gradient(
    to bottom, yellow, red 70%, black
  );
}</code>

Lihat contoh pada codepen: kecerunan radial dengan warna berhenti

Ulangi kecerunan

Gradien berulang adalah serupa dengan kecerunan lain dan mengambil parameter yang sama. Satu -satunya perbezaan ialah mereka mengulangi kedudukan berhenti warna tak terhingga. Kedudukan warna diimbangi mengikut gandaan panjang kecerunan asas. Seperti yang anda lihat, pengulangan ini membolehkan kami membuat corak dan latar belakang yang kompleks.

Satu perkara yang perlu diperhatikan ialah apabila anda menggunakan kecerunan berulang berganda pada elemen yang sama, kecerunan pertama akan dipaparkan di bahagian atas. Sudah tentu, ini bermakna jika setiap warna kecerunan pertama adalah 100% legap (iaitu tiada ketelusan), kecerunan lain dalam timbunan tidak akan dapat dilihat.

Ulangi kecerunan linear

Untuk membuat kecerunan linear mengulangi asas, kita boleh melakukan perkara berikut:

<code>.example {
  background: linear-gradient(
    [方向], [第一种颜色], [第二种颜色], [更多颜色 ...]
  );
}</code>

Lihat contoh pada codepen: mengulangi kecerunan linear

Untuk menukar warna secara tiba -tiba, anda mesti menentukan dua warna. Untuk membuat corak halus, anda hanya menambah kecerunan lain, seperti menambah pelbagai imej latar:

<code>.example {
  background: linear-gradient(to right, hotpink, lightpink);
}</code>

Kali ini saya menetapkan kecerunan kepada telus dan bukannya putih. Saya cadangkan anda mencuba warna dan sudut berhenti warna yang berbeza.

Lihat contoh pada codepen: mengulangi kecerunan linear dengan pelbagai kecerunan

Ulangi kecerunan radial

Ulangi kecerunan radial adalah serupa dengan kecerunan radial standard. Berikut adalah kod untuk mewujudkan kecerunan radial berulang yang mudah:

<code>.example {
    background: -prefix-linear-gradient(left, red, blue);
}</code>

Lihat contoh pada codepen: mengulangi kecerunan radial

anda juga boleh melapisi pelbagai gradien radial yang berulang seperti ini:

<code>.example {
  background: linear-gradient(60deg, red, blue);
}</code>

Lihat contoh pada codepen: mengulangi kecerunan radial dengan kecerunan berganda

Kesimpulan

Dalam tutorial ini, saya cuba melindungi semua aspek kecerunan CSS. Dalam banyak kes di mana corak mudah diperlukan, kecerunan dapat menghapuskan keperluan untuk menggunakan imej. Sudah tentu, sementara kecerunan mengelakkan permintaan HTTP tambahan untuk imej, mereka masih boleh menyebabkan masalah prestasi dan harus digunakan dengan berhati -hati.

soalan yang sering ditanya mengenai kecerunan CSS

Apakah perbezaan antara kecerunan linear dan kecerunan radial dalam CSS?

Dalam CSS, kecerunan digunakan untuk membuat peralihan yang lancar antara dua atau lebih warna tertentu. Peralihan kecerunan linear warna di sepanjang garis, bermula dari satu titik hingga berakhir dari titik lain. Arah kecerunan boleh ditakrifkan oleh sudut (mis. "Ke kanan" atau "45deg") atau dengan mengisytiharkan titik permulaan (mis. "Ke kanan atas").

Sebaliknya, peralihan kecerunan radial dalam corak bulat atau bujur ke warna. Mereka bermula pada satu titik dan berkembang ke luar, mewujudkan bentuk bulat atau bujur. Pelbagai parameter boleh digunakan untuk mengawal bentuk, saiz dan kedudukan kecerunan radial.

Bagaimana untuk membuat kecerunan berulang dalam CSS?

CSS menyediakan cara untuk mewujudkan kecerunan berulang menggunakan fungsi berulang-linear-gradien () dan berulang-gradien-gradien (). Fungsi-fungsi ini berfungsi sama dengan rakan-rakan mereka yang tidak berulang, tetapi mereka mengulangi corak kecerunan yang ditentukan selama-lamanya, mewujudkan corak berulang yang lancar. Sintaks fungsi ini adalah serupa dengan gradien linear () dan radial-gradien (), tetapi anda perlu menentukan kedudukan berhenti warna dalam cara anda membuat corak berulang.

Apakah kedudukan berhenti warna dalam kecerunan CSS?

Kedudukan berhenti warna adalah warna yang anda mahu memberikan peralihan yang lancar dan titik setiap warna harus muncul dalam kecerunan. Dalam kecerunan CSS, anda boleh menentukan seberapa banyak warna berhenti yang anda mahukan. Setiap kedudukan berhenti warna ditakrifkan oleh nilai warna diikuti dengan panjang pilihan atau peratusan. Jika anda tidak menentukan panjang atau peratusan, kedudukan berhenti warna akan sama rata.

Bagaimana untuk mengawal arah kecerunan linear?

Parameter pertama fungsi linear-gradient () boleh digunakan untuk mengawal arah kecerunan linear. Parameter ini boleh menjadi sudut (misalnya "45deg") atau kata kunci yang menentukan titik permulaan, seperti "ke kanan" atau "ke kiri atas". Jika anda tidak menentukan arah, kecerunan akan pergi dari atas ke bawah.

Bagaimana untuk mengawal bentuk dan saiz kecerunan radial?

Parameter pertama fungsi radial-gradien () boleh digunakan untuk mengawal bentuk dan saiz kecerunan radial. Parameter ini boleh menjadi kata kunci bentuk ("bulatan" atau "elips"), diikuti dengan kata kunci saiz pilihan ("bahagian paling dekat", "bahagian paling jauh", "corner paling dekat", "lebih jauh-sudut") dan / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / atau lokasi. Jika anda tidak menentukan bentuk, kecerunan menjadi bujur. Jika anda tidak menentukan saiz, kecerunan akan meluas ke sisi terdekat.

Bolehkah saya menggunakan ketelusan dalam kecerunan CSS?

Ya, anda boleh menggunakan ketelusan dalam kecerunan CSS dengan menggunakan nilai warna RGBA. Nilai warna RGBA ditentukan oleh: RGBA (merah, hijau, biru, alpha). Parameter alfa adalah nombor antara 0.0 (telus sepenuhnya) dan 1.0 (sepenuhnya legap).

Bagaimana untuk membuat kecerunan dengan variasi warna keras?

Untuk membuat kecerunan dengan perubahan warna keras, anda boleh menggunakan kedudukan berhenti pelbagai warna dengan kedudukan yang sama. Sebagai contoh, "biru, hijau 50%, hijau 50%, kuning" mencipta kecerunan yang tiba -tiba berubah dari biru ke hijau di tengah dan dari hijau ke kuning pada akhir.

Bolehkah saya menggunakan kecerunan sebagai imej latar belakang?

Ya, anda boleh menggunakan kecerunan sebagai imej latar belakang dalam CSS. Fungsi kecerunan mengembalikan jenis data imej CSS dan boleh digunakan di mana sahaja imej boleh digunakan. Sebagai contoh, anda boleh menggunakan kecerunan sebagai imej latar belakang untuk elemen, atau sebagai sebahagian daripada pelbagai latar belakang.

Bolehkah saya menghidupkan kecerunan dalam CSS?

CSS tidak menyokong kecerunan animasi langsung. Walau bagaimanapun, anda boleh mencapai kesan yang sama dengan menghidupkan kedudukan latar belakang atau saiz latar belakang unsur-unsur dengan kecerunan berulang, atau dengan menggunakan kecerunan sebagai topeng pada kandungan animasi.

Adakah semua pelayar menyokong kecerunan CSS?

kecerunan CSS disokong secara meluas oleh semua pelayar moden, termasuk Chrome, Firefox, Safari, Edge, dan Internet Explorer 10 dan kemudian. Walau bagaimanapun, untuk penyemak imbas yang lebih tua yang tidak menyokong kecerunan, anda harus memberikan warna alternatif.

Atas ialah kandungan terperinci Kecerunan CSS: Kursus Kemalangan Sintaks. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!