Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Mencipta Bayang Kotak dalam IE7 dan IE8?

Bagaimana untuk Mencipta Bayang Kotak dalam IE7 dan IE8?

Susan Sarandon
Susan Sarandonasal
2024-11-06 12:06:02558semak imbas

How to Create Box Shadows in IE7 and 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn