css untuk mencapai kecerunan-Soal Jawab bahagian hadapan-php.cn

CSS ialah bahasa reka bentuk gaya laman web yang biasa digunakan yang boleh mencapai pelbagai kesan cantik. Antaranya, kesan kecerunan adalah teknik yang biasa digunakan oleh ramai pereka web dan boleh dicapai melalui CSS. Artikel ini akan memperkenalkan cara menggunakan CSS untuk mencapai kesan kecerunan, termasuk kecerunan linear dan kecerunan jejari.

1. Kecerunan linear

Kecerunan linear merujuk kepada proses menukar warna secara beransur-ansur dalam satu arah. Kita boleh mencapai kesan ini melalui sifat kecerunan linear CSS.

Pelaksanaan khusus adalah seperti berikut:

Buat elemen HTML dan tetapkan gaya CSSnya

< ;/div>

.box {

width: 300px;
height: 200px;
background: linear-gradient(to right, #03a9f4, #f44336);

Salin selepas log masuk

}

Dalam kod CSS, gunakan atribut "linear-gradient" untuk menentukan kecerunan linear

Kecerunan linear mempunyai dua parameter Parameter pertama ialah arah Ia menyokong ke kiri, ke kanan, ke bawah, ke atas, ke kiri bawah dan arah lain yang ditentukan. Argumen kedua ialah tatasusunan nilai warna, dipisahkan dengan koma. Nilai warna dalam tatasusunan ini mewakili kecerunan warna dari titik permulaan ke titik akhir kecerunan.

Sebagai contoh, kod berikut mewakili kecerunan linear dari kiri ke kanan Titik permulaan kecerunan ialah #03a9f4 dan titik akhir ialah #f44336:

latar belakang: linear-gradient(. ke kanan, #03a9f4, # f44336);

Kami juga boleh menetapkan berbilang nilai warna untuk menjadikan kecerunan warna lebih licin:

latar belakang: linear-gradient(ke kanan, #03a9f4, #2196f3, #9c27b0, #f44336 );

Dengan cara ini, akan terdapat empat peralihan warna berbeza dari kiri ke kanan.

2. Kecerunan Jejari

Kecerunan jejari merujuk kepada proses penggredan warna secara beransur-ansur dari titik tengah ke persekitaran. Kita juga boleh mencapai kesan ini melalui CSS.

Pelaksanaan khusus adalah seperti berikut:

Buat elemen HTML dan tetapkan gaya CSSnya

< ;/div>

.box {

width: 300px;
height: 200px;
background: radial-gradient(circle at center, #03a9f4, #f44336);

Salin selepas log masuk

}

Dalam kod CSS, gunakan atribut "radial-gradient" untuk mentakrifkan radial gradient

radial-gradient mempunyai tiga parameter Parameter pertama menentukan jenis kecerunan, bulatan sokongan (bulatan) dan elips (elips). Parameter kedua menentukan kedudukan pusat kecerunan, menggunakan sintaks "Kedudukan paksi-X Y-kedudukan paksi".

Parameter ketiga menentukan tatasusunan nilai warna kecerunan, juga dipisahkan dengan koma.

Contohnya, kod berikut mewakili kecerunan jejari bermula dari tengah Titik permulaan kecerunan ialah #03a9f4 dan titik akhir ialah #f44336:

latar belakang: jejari-kecerunan(. bulatan di tengah, #03a9f4, #f44336);

Kami juga boleh menetapkan berbilang nilai warna untuk menjadikan kecerunan lebih licin:

latar belakang: radial-gradient(bulatan di tengah, #03a9f4 , #2196f3, #9c27b0, # f44336);

Dengan cara ini, semasa proses kecerunan bermula dari pusat ke sekeliling, warna akan berubah secara beransur-ansur dari nilai pertama ke nilai terakhir, melalui proses kecerunan di tengah.

3. Kecerunan lain

CSS juga menyokong jenis kecerunan lain, seperti kecerunan berulang, kecerunan tidak sekata, dsb. Kaedah pelaksanaan jenis kecerunan ini juga serupa, dan boleh dicapai dengan menetapkan atribut gaya.

Sebagai contoh, kod berikut mewakili kecerunan linear berulang:

latar belakang: repeating-linear-gradient(ke kanan, #03a9f4, #2196f3-20px, #f44336 40px);

Dalam kod ini, titik permulaan kecerunan warna ialah #03a9f4 dan titik akhir ialah #f44336 Perubahan warna akan diulang sehingga keseluruhan elemen diisi. Antaranya, "#2196f3-20px" bermakna nilai warna ini akan dikurangkan sebanyak 20 piksel dalam arah paksi-x, sekali gus membentuk kesan berperingkat.

4. Ringkasan

Kesan kecerunan CSS boleh menjadikan reka bentuk halaman web lebih jelas dan menarik perhatian. Artikel ini menerangkan cara melaksanakan kecerunan linear dan jejari, serta contoh kod untuk beberapa jenis kecerunan lain. Semoga ia membantu semua orang.

Atas ialah kandungan terperinci css untuk mencapai kecerunan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber：php.cn

Artikel sebelumnya：kesan putaran css Artikel seterusnya：Bagaimana untuk memasukkan JavaScript ke dalam DW

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang