Fungsi radial-gradient
Fungsi radial-gradient menetapkan gradien
jejari. Fungsi ini digunakan untuk sifat yang
menetapkan imej latar belakang: background,
background-image
atau imej sempadan: border-image,
background-image-source.
Sintaks
pemilih {
background: radial-gradient([bentuk jenis posisi], warna1 saiz1, warna2 saiz2...);
}
Nilai
| Nilai | Keterangan |
|---|---|
| bentuk |
Nilai yang diterima:
ellipse gradien elips (lalai),
circle gradien bulat.
|
| jenis |
Menetapkan regangan gradien.
Nilai yang diterima:
closest-side, closest-corner,
farthest-side, farthest-corner.
|
| posisi |
Selepas kata kunci at
dinyatakan posisi dalam sebarang unit untuk saiz
atau menggunakan kata kunci top, bottom,
left, right, center
dalam pelbagai kombinasi.
|
| warna1 | Warna permulaan gradien dalam sebarang unit untuk warna. |
| warna2 | Warna akhir gradien dalam sebarang unit untuk warna. |
| saiz | Menetapkan jarak warna tertentu gradien dalam sebarang unit untuk saiz. |
Nilai untuk jenis
| Nilai | Keterangan |
|---|---|
closest-side |
Bentuk gradien bertepatan dengan sisi blok yang terdekat dengannya. |
closest-corner |
Bentuk gradien dikira berdasarkan maklumat tentang jarak ke sudut terdekat blok. |
farthest-side |
Gradien merebak ke sisi blok yang terjauh. |
farthest-corner |
Bentuk gradien dikira berdasarkan maklumat tentang jarak ke sudut terjauh blok. |
Catatan
Jenis dan bentuk boleh ditukar tempat, tetapi posisi pergi di akhir parameter pertama. Jenis gradien dan saiznya tidak berfungsi antara satu sama lain (logik, kerana mereka bercanggah). Saiz menang.
Contoh . Pilihan paling mudah
Mari kita tetapkan warna permulaan dan akhir:
<div id="elem"></div>
#elem {
background: radial-gradient(red, blue);
width: 200px;
height: 200px;
}
:
Contoh . Tambah posisi
Mari kita tetapkan kedudukan pusat:
30px - inden kiri, 100px - inden atas:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 100px, red, blue);
width: 200px;
height: 200px;
}
:
Contoh . Posisi dalam peratus
Mari kita tetapkan kedudukan pusat dalam peratus:
30% - inden kiri, 50% - inden atas:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30% 50%, red, blue);
width: 200px;
height: 200px;
}
:
Contoh . Posisi dengan kata kunci
Boleh menggunakan kata kunci
top, bottom, left,
right, center dalam pelbagai
kombinasi. Mari letakkan gradien
di kanan di tengah:
<div id="elem"></div>
#elem {
background: radial-gradient(at right center, red, blue);
width: 200px;
height: 200px;
}
:
Contoh . Saiz gradien
Dalam kes ini gradien akan berfungsi seperti berikut:
dari 0px hingga 20px akan menjadi warna
merah tulen, dari 20px hingga 60px - gradien
dari merah ke biru, selepas 60px - biru
tulen:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Contoh . Beberapa warna berturut-turut
Dalam kes ini gradien akan berfungsi seperti berikut:
dari 0px hingga 20px akan menjadi warna
merah tulen, dari 20px hingga 40px
akan menjadi warna biru tulen, dari 40px
hingga 60px - gradien dari biru ke hijau,
selepas 60px - hijau tulen:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
width: 200px;
height: 200px;
}
:
Contoh . Saiz + posisi
Mari kita tetapkan serentak saiz untuk warna yang berbeza dan posisi pusat gradien:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 60px, red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Contoh . Bentuk gradien
Bentuk gradien ditetapkan oleh parameter pertama
dan boleh menerima 2 nilai: circle
(gradien bulat) atau ellipse (gradien
elips, lalai). Mengapa sehingga ini
kita tidak melihat gradien elips, walaupun
ia ditetapkan secara lalai? Kerana sehingga ini
bentuk blok adalah segi empat sama. Jika kita menukar
bentuk kepada segi empat tepat, kita akan melihat gradien elips:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Contoh . Gradien bulat
Mari buat gradien bulat dalam blok
segi empat tepat. Untuk ini, tetapkan parameter pertama
bentuk gradien dengan kata kunci
circle:
<div id="elem"></div>
#elem {
background: radial-gradient(circle, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Contoh . Tambah posisi
Mari tambahkan kepada kod sebelumnya juga posisi gradien:
<div id="elem"></div>
#elem {
background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Contoh . Jenis farthest-corner + circle
Bentuk gradien dikira berdasarkan maklumat tentang jarak ke sudut terjauh blok:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Contoh . Jenis farthest-corner + ellipse
Bentuk gradien dikira berdasarkan maklumat tentang jarak ke sudut terjauh blok:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Contoh . Jenis farthest-side + circle
Gradien merebak ke sisi blok yang terjauh:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Contoh . Jenis farthest-side + ellipse
Gradien merebak ke sisi blok yang terjauh:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Contoh . Jenis closest-corner + circle
Bentuk gradien dikira berdasarkan maklumat tentang jarak ke sudut terdekat blok:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Contoh . Jenis closest-corner + ellipse
Bentuk gradien dikira berdasarkan maklumat tentang jarak ke sudut terdekat blok:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Contoh . Jenis closest-side + circle
Bentuk gradien bertepatan dengan sisi blok yang terdekat dengannya:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Contoh . Jenis closest-side + ellipse
Bentuk gradien bertepatan dengan sisi blok yang terdekat dengannya:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Lihat juga
-
fungsi
linear-gradient,
yang mencipta gradien linear -
fungsi
repeating-linear-gradient,
yang mencipta gradien linear berulang -
fungsi
repeating-radial-gradient,
yang mencipta gradien jejari berulang
