Sifat fon kecerunan CSS: kecerunan linear dan regangan fon

Sifat fon kecerunan CSS: kecerunan linear dan regangan fon, contoh kod khusus diperlukan

Dalam reka bentuk web moden, untuk menarik pengguna dan meningkatkan kesan visual halaman, fon kecerunan telah menjadi reka bentuk yang popular trend. CSS menyediakan beberapa sifat untuk mencapai kesan fon kecerunan, termasuk kecerunan linear dan regangan fon. Artikel ini akan menumpukan pada penggunaan kedua-dua sifat ini dan menyediakan contoh kod khusus untuk membantu pembaca menguasainya dengan lebih baik.

1. Atribut kecerunan linear

Atribut kecerunan linear digunakan untuk mencipta latar belakang kecerunan linear. Ia boleh digunakan untuk warna latar belakang teks, warna sempadan, dsb. Untuk fon kecerunan, kita boleh mencapai kesannya dengan menggunakannya sebagai warna latar belakang teks.

Sintaks untuk menggunakan atribut kecerunan linear untuk mencipta fon kecerunan adalah seperti berikut:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

di mana arah menentukan arah kecerunan, yang boleh menjadi salah satu daripada nilai berikut:

• ke atas: kecerunan dari bawah ke atas
• ke bawah: dari atas ke Kecerunan bawah
• ke kiri: Kecerunan dari kanan ke kiri
• ke kanan: Kecerunan dari kiri ke kanan

color-stop menentukan warna dan kedudukan kecerunan, anda boleh menggunakan peratusan atau nilai piksel. Contohnya:

h1 {
  background: linear-gradient(to right, #ff0000 0%, #00ff00 50%, #0000ff 100%);
}

Kesan kod di atas ialah mencipta fon kecerunan daripada merah kepada hijau kepada biru dalam teg h1.

2. Atribut regangan fon

Atribut regangan fon digunakan untuk mengawal tahap regangan fon. Ia boleh menjadikan fon lebih tebal atau lebih langsing. Dalam reka bentuk fon kecerunan, atribut regangan fon boleh digunakan dengan baik bersama dengan atribut kecerunan linear untuk menjadikan fon kecerunan lebih menarik.

Sintaks untuk menggunakan atribut regangan fon adalah seperti berikut:

font-stretch: normal|ultra-condensed|extra-condensed|condensed|semi-condensed|semi-expanded|expanded|extra-expanded|ultra-expanded;

Maksud setiap nilai adalah seperti berikut:

• biasa: lebar fon biasa
• ultra-pekat: fon sangat padat
• :ekstra sangat padat Fon
• dipekat: fon padat
• separuh pekat: fon yang lebih padat
• separuh kembang: fon yang lebih kembang
• diperluas: fon yang diperluas
• diperluas
• fon yang sangat dikembangkan ultra- kembangkan: Fon sangat dikembangkan

Sebagai contoh, kita boleh menggabungkan kod fon kecerunan di atas dengan atribut regangan fon untuk mencipta kesan fon yang lebih unik:

h1 {
  background: linear-gradient(to right, #ff0000 0%, #00ff00 50%, #0000ff 100%);
  font-stretch: expanded;
}

Kod di atas akan menjadikan fon dalam tajuk h1 Stretch secara mendatar untuk meningkatkan lebarnya.

Ringkasan

Fon kecerunan boleh menambah kesan visual yang unik pada halaman web dan menarik perhatian pengguna. Kita boleh mencapai kesan ini dengan mudah menggunakan sifat kecerunan linear dan regangan fon CSS. Apabila mereka bentuk fon kecerunan, anda boleh melaraskan arah kecerunan dan tahap regangan fon mengikut keperluan anda untuk menjadikan fon lebih menarik. Semoga contoh kod dan penjelasan dalam artikel ini akan membantu pembaca memahami dan menggunakan kedua-dua sifat ini dengan lebih baik.

Atas ialah kandungan terperinci Sifat fon kecerunan CSS: kecerunan linear dan regangan fon. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!