Bagaimana untuk mencipta kesan bayangan kotak dalam IE7 dan IE8?

Bayang Kotak dalam IE7 dan IE8

Bayang-bayang kotak CSS ialah cara yang berkesan untuk menambah kedalaman dan dimensi pada elemen pada halaman web. Walau bagaimanapun, bayang-bayang ini tidak disokong dalam IE7 dan IE8. Untuk mencapai kesan yang diingini, anda boleh menggunakan gabungan HTML, CSS dan JavaScript.

Penyelesaian CSS

Satu pilihan ialah menggunakan pustaka CSS3 PIE, yang membolehkan anda meniru sifat CSS3 dalam versi lama IE. PIE menyokong bayang kotak (dengan pengecualian kata kunci inset), jadi anda boleh menggunakannya untuk menggunakan bayang kotak pada elemen dalam IE7 dan IE8. Di bawah ialah CSS dikemas kini yang boleh anda gunakan:

.bright{
    position: absolute;
    z-index: 1; 
    -moz-box-shadow: 0px -3px 55px 20px #147197;
    box-shadow: 0px -3px 55px 20px #147197;
    -webkit-box-shadow: 0px -3px 55px 20px #147197;
    behavior: url(ie-css3.htc);
}

Perhatikan bahawa anda perlu memuat turun fail ie-css3.htc dan memasukkannya ke dalam halaman web anda.

Penyelesaian JavaScript

Pilihan lain ialah menggunakan JavaScript untuk mencipta kesan bayangan kotak. Anda boleh menggunakan pustaka JavaScript BoxShadows.js, yang menambahkan sokongan untuk bayang-bayang kotak kepada IE7 dan IE8. Berikut ialah cara anda boleh menggunakannya:

<div class="bright"></div>

$(".bright").boxShadow({
    x: 0,
    y: -3,
    blur: 55,
    color: "#147197"
});

Keserasian Pelayar IE

Adalah penting untuk ambil perhatian bahawa IE7 tidak menyokong ciri moden seperti CSS3 bayang-bayang kotak, jadi anda perlu menggunakan polyfill atau penyelesaian JavaScript untuk mencapai kesan ini. IE8 menyokong beberapa ciri CSS3, tetapi tidak semuanya. Oleh itu, anda harus menggunakan skrip pengesanan ciri untuk menentukan ciri yang disokong dan menggunakan kaedah sandaran yang sesuai dengan sewajarnya.

Atas ialah kandungan terperinci Bagaimana untuk mencipta kesan bayangan kotak dalam IE7 dan IE8?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!