Bagaimana untuk Mencegah Pendarahan Gradien Latar Belakang dalam IE9 Apabila Menggunakan Jejari Sempadan?

Jejari Sempadan dan Kecerunan Latar Belakang IE9: Satu Teka-teki

Sokongan IE9 untuk jejari sempadan menggunakan piawaian CSS3 diketahui secara meluas. Walau bagaimanapun, apabila sudut bulat ini digabungkan dengan kecerunan latar belakang, isu yang tidak dijangka timbul: kecerunan berdarah melepasi tepi melengkung.

Penyelesaian: Menggunakan Teknik Topeng

Satu penyelesaian melibatkan penggunaan div tambahan untuk bertindak sebagai topeng. Begini cara untuk melaksanakannya:

1. Tambah Div Bertopeng: Balut elemen dengan kedua-dua bucu bulat dan kecerunan dalam div baharu.
2. Set Atribut Div: Beri div pelindung nilai ketinggian, lebar dan jejari sempadan yang sama seperti elemen dalam.
3. Sembunyikan Limpahan: Tetapkan sifat limpahan div pelindung kepada tersembunyi.

Ini mencipta topeng yang menyembunyikan pendarahan kecerunan, sambil membenarkan sudut bulat kekal utuh.

Kod HTML dan CSS:

<code class="html"><div class="mask roundedCorners">
    <div class="roundedCorners gradient">
        Content
    </div>
</div></code>

<code class="css">.mask {
    overflow: hidden;
}

.roundedCorners {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.gradient {
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0065a4', endColorstr='#a0cf67',GradientType=0 ); /* IE6-9 */
}</code>

Dengan menggunakan teknik topeng ini, anda boleh mengatasi isu pendarahan kecerunan dan mencapai kesan yang diingini dalam IE9.

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Pendarahan Gradien Latar Belakang dalam IE9 Apabila Menggunakan Jejari Sempadan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!