Bagaimana untuk Membetulkan Pendarahan Jejari Sempadan dan Ketakteraturan Bayangan dalam IE9 dengan Latar Belakang Kecerunan?

Mengatasi Pendarahan Jejari Sempadan dan Ketakteraturan Bayangan dalam IE9 dengan Latar Belakang Kecerunan

Dalam Internet Explorer 9, sokongan penyemak imbas untuk kedua-dua jejari sempadan ( sudut bulat) dan kecerunan latar belakang tersedia. Walau bagaimanapun, apabila menggabungkan ciri ini, pengguna telah menghadapi masalah di mana kecerunan berdarah di luar sudut bulat. Selain itu, penyelewengan dalam bayang-bayang telah diperhatikan.

Penyelesaian

Walaupun IE9 mungkin menyokong kedua-dua jejari sempadan dan kecerunan latar belakang secara asli, ia tidak berfungsi bersama dengan lancar. Untuk menyelesaikan isu pendarahan, satu penyelesaian ialah membalut elemen dengan kecerunan dan sudut bulat dalam div lain. Div luar ini harus mempunyai saiz dan nilai sudut bulat yang sama dengan elemen dalam. Dengan menetapkan limpahan kepada tersembunyi, kesan topeng dicipta, dengan berkesan menyembunyikan limpahan kecerunan.

HTML

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

CSS

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

Atas ialah kandungan terperinci Bagaimana untuk Membetulkan Pendarahan Jejari Sempadan dan Ketakteraturan Bayangan dalam IE9 dengan Latar Belakang Kecerunan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!