CSS3 Pekeliling dan Kecerunan Elliptikal [Tips CSS3]
Hari ini kami akan meneruskan perbincangan kami Kecerunan CSS3. Dalam jawatan sebelumnya kami telah menunjukkan kepada anda cara membuat Gradien Linear. Kali ini kita akan menolong saudara mereka, Kecerunan Pekeliling dan Elliptikal.
Sintaks Gradien
Kecerunan dalam CSS3 diisytiharkan menggunakan imej latar belakang harta. Ini adalah untuk keserasian yang lebih baik apabila kita juga perlu menambah warna latar belakang dalam set peraturan tunggal, supaya mereka tidak bertembung dengan satu sama lain. Kemudian, untuk mencipta kecerunan jejarian kita hanya memanggilnya dengan ini gradien radial () fungsi. Terdapat empat nilai untuk dimasukkan ke dalam fungsi untuk menetapkan kecerunan dengan betul.
Nilai pertama mentakrifkan kedudukan kecerunan. Kita boleh menggunakan kata kunci deskriptif seperti bahagian atas, bawah, tengah dan kiri, atau kita juga boleh menjadi lebih spesifik seperti, 50% 50% untuk menetapkan kecerunan di pusat atau 0% 0% untuk menetapkan kecerunan untuk bermula pada kiri atas.
Nilai kedua mentakrifkan bentuk dan saiz kecerunan, terdapat dua hujah untuk membentuk kecerunan, terlebih dahulu ellipse yang merupakan lalai, dan yang kedua adalah bulatan.
Dan untuk saiz kecerunan, kita boleh memilih salah satu daripada enam hujah berikut.
| Nilai | Penerangan |
|---|---|
terdekatnya | Bentuk kecerunan memenuhi bahagian kotak yang paling dekat dengan pusatnya (untuk bulatan) atau memenuhi kedua-dua sisi menegak dan mendatar yang paling dekat dengan pusat (untuk elips). |
sudut terdekat | Bentuk kecerunan bersaiz sehingga ia memenuhi sudut paling dekat kotak dari pusatnya. |
paling jauh | Sama dengan bahagian paling dekat, kecuali bentuknya bersaiz untuk memenuhi sisi kotak paling jauh dari pusatnya (atau sisi menegak dan mendatar). |
sudut terjauh | Bentuk kecerunan bersaiz sehingga ia memenuhi sudut paling jauh kotak dari pusatnya. |
mengandungi | Sintetik untuk |
penutup | Sintetik untuk |
Sumber Jadual: Rangkaian Pembangun Mozilla.
Terakhir, yang ketiga dan keempat mentakrifkan kombinasi warna. Jadi, inilah cara kita menulis sintaks untuk mencipta Elliptical kecerunan, dan kali ini kita akan gunakan penutup untuk saiz kecerunan, jadi ia akan tersebar luas, meliputi bekas;
badan background-image: radial-gradient (center center, cover elips, # ffeda3, # ffc800);
Untuk mencipta Pekeliling kecerunan kita hanya dapat melakukannya dengan cara ini:
body background-image: radial-gradient (center center, cover circle, # ffeda3, # ffc800);
Seperti namanya, bentuk kecerunan akan menjadi bulatan.
Sokongan Penyemak Imbas
Hanya ambil perhatian, semua pelayar masih dalam proses menyediakan sokongan penuh untuk ciri ini, jadi mereka masih memerlukan awalan vendor. Oleh itu, sintaks lengkap lengkap yang akan berfungsi di semua pelayar moden - IE10 +, Firefox 3.6+, Chrome 4.0+, Safari 4.0+ dan Opera 11+ - akan kelihatan seperti ini;
body background-image: radial-gradient (bottom center, cover elips, # ffeda3, # ffc800); latar belakang-imej: -o-radial-kecerunan (bahagian tengah, penutup elips, # ffeda3, # ffc800); latar belakang-imej: -ms-radial-kecerunan (bahagian tengah, penutup elips, # ffeda3, # ffc800); latar belakang-imej: -moz-radial-kecerunan (bawah tengah, penutup elips, # ffeda3, # ffc800); background-image: -webkit-radial-gradient (bahagian tengah, pelindung elips, # ffeda3, # ffc800);
Lihat demo atau muat turun sumber untuk bermain-main dengan kecerunan.
- Demo
- Muat turun Sumber
Perkataan Akhir
Mencipta kecerunan jejari CSS3 tidak begitu sukar seperti yang anda fikirkan, dan terutamanya apabila anda mendapatkan bantuan daripada alat-alat ini untuk menghasilkan kod:
- Greden Colorzilla
- Gradientoo
Kecerunan Radial hanya satu jenis carta CSS3, kami akan meneruskan perbincangan kami mengenai subjek dalam jawatan masa depan, jadi tontonlah Hongkiat.com
