css untuk mencapai kecerunan

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:

1. Buat elemen HTML dan tetapkan gaya CSSnya

< ;/div>

.box {

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

}

2. 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:

1. Buat elemen HTML dan tetapkan gaya CSSnya

< ;/div>

.box {

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

}

2. 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!

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

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

2 minggu yang lalu By DDD

R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Cara Membuka Segala -galanya Di Myrise

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7517

15

Tutorial CakePHP

1378

52

Apakah format nama akaun stim

79

11

kunci pengaktifan win11 kekal

53

19

Sambungan NYT menunjukkan dan jawapan

21

66

Tunjukkan Lagi