CSSlinear-gradient dan radial-gradient

Saya telah menggunakan banyak sifat css3 sebelum ini, tetapi tidak lama kemudian saya melupakannya kerana banyak daripadanya rumit untuk diingati, jadi saya ingin menulis blog untuk memudahkan untuk mengingatinya.
jadi izinkan saya menerangkan kecerunan garis dahulu:
imej latar belakang: kecerunan linear(arah, warna-langkah1, warna-langkah2, ....)

• arah: menggunakan sudut untuk menunjukkan arah kecerunan yang nilainya boleh menjadi sudut atau salah satu daripadanya: ke kiri, ke kanan, ke atas, ke bawah. ke bawah (180deg) adalah lalai. 
• warna-langkah: warna permulaan untuk kecerunan, terdiri daripada dua bahagian: warna: nilai warna css yang sah; panjang atau peratusan: kedudukan permulaan, tidak membenarkan nilai negatif

contoh(dengan andaian ketinggian:100px)
latar belakang:kecerunan linear (ke bawah, merah 0%, kuning 50%, hijau 100%); sama dengan latar belakang:linear-gradient(180deg, merah 0px, kuning 50px, hijau 100px);


repeatng-linear-gradient(): latar belakang: repeating-linear-gradient(merah 0,merah 10%,kuning 10%,kuning 20%);


parameter thease mewakili 0% - 10% daripada merah kepada merah, 10% - 20% daripada kuning kepada kuning dan ulangi kesan ini untuk meliputi keseluruhan saiz elemen.

radial-gradient()
parameter fungsi ini terdiri daripada lima bahagian: bentuk, saiz, kedudukan pusat bulatan, warna, kedudukan warna.

• bentuk: elips(lalai) atau bulatan;
• saiz: Saya lebih suka memanggilnya sebagai arah peningkatan jejari kecerunan jejari, dengan nilai yang mungkin: sudut terjauh(lalai), sudut terdekat, bahagian paling jauh, bahagian paling hampir.
• kedudukan: kedudukan tengah kecerunan jejari, (50%, 50%) ialah lalai;
• kedudukan warna dan warna: sama dengan kecerunan linear;

kesan ini ialah kedudukan tengah terletak pada (0,0) dan jejari kecerunan adalah sama dengan lebar elemen;

Dan repeating-radial-gradient() adalah sama dengan repeating-linear-gradient().

akhir sekali, terdapat keserasian kecerunan linear dan kecerunan sinaran (lebih lanjut mengenainya di laman web CanIuse)

Atas ialah kandungan terperinci CSSlinear-gradient dan radial-gradient. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!