Bagaimanakah Saya Mencapai Keserasian Merentas Pelayar untuk Kecerunan Linear dalam CSS3?

Sokongan Penyemak Imbas Rentas untuk Kecerunan Linear dalam CSS3

Pernyataan Masalah

Dalam landskap pembangunan web hari ini, keserasian merentas penyemak imbas adalah yang terpenting. Untuk mencapai kesan kecerunan yang konsisten merentas pelayar, pembangun mungkin menghadapi cabaran dengan fungsi tertentu. Artikel ini meneroka pelaksanaan kecerunan linear dalam CSS3 untuk Opera dan Internet Explorer.

Alternatif Penyemak Imbas

Untuk Opera dan IE, kod yang setara untuk kecerunan latar belakang menggunakan awalan vendor ialah:

background-image: -ms-linear-gradient(right, #0c93C0, #FFF);
background-image: -o-linear-gradient(right, #0c93C0, #FFF);

Kecerunan Mendatar

Untuk mencipta mendatar kecerunan, ubah suai sintaks seperti berikut:

background-image: -webkit-linear-gradient(left, #0C93C0, #FFF);
background-image:    -moz-linear-gradient(left, #0C93C0, #FFF);

Penjelasan Awalan

Sifat CSS eksperimen diawalkan untuk menunjukkan keserasian dengan penyemak imbas tertentu:

• -webkit- untuk Pelayar webkit (Chrome, Safari)
• -moz- untuk Firefox
• -o- untuk Opera
• -ms- untuk Internet Explorer
• Tiada awalan untuk pelaksanaan standard

Sokongan Internet Explorer

Untuk versi IE di bawah 10, gunakan yang berikut sintaks:

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

Penjelasan Sintaks

Sintaks -ms-filter untuk IE adalah seperti berikut:

-ms-filter: progid:DXImageTransform.Microsoft.Gradient(
     startColorStr='#0c93c0', /*Start color*/
     endColorStr='#FFFFFF',   /*End color*/
     GradientType=0           /*0=Vertical, 1=Horizontal gradient*/
);

Format warna ARGB boleh digunakan dan bukannya RGB HEX . GradientType adalah pilihan dan tidak peka huruf besar-besaran.

Atas ialah kandungan terperinci Bagaimanakah Saya Mencapai Keserasian Merentas Pelayar untuk Kecerunan Linear dalam CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!