Bagaimanakah Saya Boleh Melaksanakan Kecerunan Linear Serasi Penyemak Imbas Rentas?

Melaksanakan Kecerunan Linear dalam Pelbagai Pelayar

Keserasian Merentas Pelayar

Masalah: Dapatkan keserasian silang penyemak imbas untuk linear kecerunan dinyatakan seperti berikut:

background-image: -webkit-gradient(linear, right top, left bottom, from(#0C93C0), to(#FFF));
background-image: -moz-linear-gradient(right, #0C93C0, #FFF);

Alternatif Opera dan IE:

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

Kecerunan Menegak vs Mendatar

Untuk mengubah suai kecerunan yang akan mendatar dan bukannya menegak, gunakan nilai berikut untuk titik mula dan tamat:

top left
top right

Contohnya:

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

Internet Explorer < 10

Untuk versi Internet Explorer sebelum 10, gunakan kod berikut:

/*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

• Awalan digunakan untuk sifat CSS percubaan:

  • -webkit- untuk penyemak imbas Webkit (Chrome, Safari)
  • -moz- untuk Firefox
  • -o- untuk Opera
  • -ms - untuk Internet Explorer
• kecerunan linear tanpa awalan menunjukkan pematuhan penuh dengan spesifikasi CSS.

Rujukan

• [ MDN: linear-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient)

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melaksanakan Kecerunan Linear Serasi Penyemak Imbas Rentas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!