Bagaimana untuk Mencipta Bayang Kotak dalam IE7 dan IE8?

Bayang Kotak dalam IE7 dan IE8: Panduan Komprehensif

Mencapai bayangan kotak dalam IE7 dan IE8 boleh menimbulkan cabaran, tetapi penyelesaian yang berdaya maju terletak dalam CSS3 PIE. Dengan mencontohi sifat CSS3 dalam penyemak imbas ini, CSS3 PIE membolehkan pembangun melaksanakan bayang kotak dengan mudah.

Kod CSS untuk Box Shadow

Untuk menggunakan bayang kotak berwarna pada elemen div, gunakan CSS berikut:

.bright {
    position: absolute;
    z-index: 1; 
    box-shadow: 0px -3px 55px 20px #147197;
}

IE sahaja Penyelesaian

Walaupun kod CSS di atas akan berfungsi dalam IE9 dan kemudian, ia tidak menyokong bayang kotak dalam IE7 dan IE8. Untuk menangani perkara ini, anda boleh menggunakan:

fail ie-css3.htc: Fail ini menyediakan sokongan bayang-bayang asas dalam IE, tetapi ia hanya mencipta bayang-bayang hitam.

penapis: progid:DXImageTransform.Microsoft.Shadow: Kaedah ini mencipta bayang arah, yang mungkin tidak sesuai untuk bayang-bayang omni-directional.

CSS3 PIE

Penyelesaian paling berkesan untuk bayang-bayang kotak dalam IE7 dan IE8 ialah CSS3 PIE. Alat ini meniru sifat kotak-bayang menggunakan gabungan HTML dan JavaScript. Ia menyokong semua sifat box-shadow kecuali kata kunci "inset".

Untuk menggunakan CSS3 PIE, muat turun perpustakaan dan masukkannya dalam fail HTML anda:

<script src="PIE.htc"></script>

Selepas memasukkan perpustakaan, anda boleh menggunakan bayang kotak seperti biasa. CSS3 PIE secara automatik akan mengendalikan emulasi dalam IE7 dan IE8.

Kesimpulan

Bayang-bayang kotak boleh dilaksanakan dalam IE7 dan IE8 menggunakan CSS3 PIE. Alat ini memberikan sokongan yang sangat baik untuk sifat kotak-bayang, menjadikannya penyelesaian yang boleh dipercayai untuk menambahkan kedalaman visual pada elemen web.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Bayang Kotak dalam IE7 dan IE8?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!