Kecerunan Linear Penyemak Imbas Rentas dalam CSS3

Membuat kecerunan linear dalam CSS3 adalah mudah, tetapi keserasian merentas penyemak imbas boleh menjadi cabaran. Penyemak imbas Webkit (Chrome dan Safari) dan Firefox menggunakan sintaks berbeza daripada Opera dan Internet Explorer.

Webkit dan Alternatif Firefox

Sintaks Webkit dan Firefox yang disediakan mencipta kecerunan linear pepenjuru dari kanan atas ke kiri bawah. Begini cara untuk mencapai kecerunan yang sama ini dengan Opera dan Internet Explorer:

imej latar belakang: -ms-linear-gradient(kanan, #0c93C0, #FFF);
imej latar belakang: -o-linear-gradient(kanan, #0c93C0, #FFF);

Cross-Browser Horizontal Gradients

Untuk mencipta kecerunan mendatar, gantikan "atas" arah dengan sama ada "kiri" atau "kanan".

Internet Explorer

Untuk versi Internet Explorer kurang daripada 10, anda perlu menggunakan penapis harta:

/IE7-/ penapis: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType =0);
/IE8 / -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0)";

-ms-Penapis Sintaks

Sintaks -ms-filter adalah seperti berikut:

-ms-filter: progid:DXImageTransform.Microsoft.Gradient(

 startColorStr='#0c93c0', /*Start color*/
 endColorStr='#FFFFFF',   /*End color*/
 GradientType=0           /*0=Vertical, 1=Horizontal gradient*/

);

Anda juga boleh menggunakan format warna ARGB, dengan FF mewakili legap dan 00 mewakili lutsinar.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Kecerunan Linear Serasi Cross-Pelayar dalam CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!