Gangguan Radial CSS

Gangguan Radial CSS

Peningkatan radial ditentukan oleh pusatnya.

Untuk membuat peningkatan radial, Anda harus mendefinisikan setidaknya dua tanda warna.

Syarat

background-image: radial-gradient(shape size at position, start-color, ... , last-color);

secara baku,shape untuk bentuk elips,size untuk sudut paling jauh,position di tengah.

Peningkatan radial dengan jarak warna yang rata (baku)

Contoh di bawah ini menunjukkan peningkatan radial dengan jarak warna yang rata:

Contoh

#grad {
  background-image: radial-gradient(red, yellow, green);
}

Coba Sendiri

Peningkatan radial dengan jarak warna yang berbeda

Contoh di bawah ini menunjukkan peningkatan radial dengan jarak warna yang berbeda:

Contoh

#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

Coba Sendiri

Setel bentuk

shape Parameter mendefinisikan bentuk. Ia dapat menerima nilai circle atau ellipse. Nilai baku adalah ellipse (ellips).

Contoh di bawah ini menunjukkan peningkatan radial lingkaran:

Contoh

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

Coba Sendiri

Gunakan kata kunci ukuran yang berbeda

size Parameter mendefinisikan ukuran peningkatan. Ia dapat menerima empat nilai:

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

Contoh

Dijadualkan peningkatan radial berukuran berbeda:

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

Coba Sendiri

Gradasi radial yang diulang

repeating-radial-gradient() Fungsi untuk gradasi radial yang diulang:

Contoh

Gradasi radial yang diulang:

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

Coba Sendiri

Properti Gradasi CSS

Tabel di bawah ini menunjukkan properti gradasi CSS:

Properti Penerangan
background-image Menetapkan satu atau beberapa imej latar belakang untuk seorang elemen.