Bagaimana untuk Memperbaiki Jejari Sempadan dan Pendarahan Gradien Latar Belakang dalam IE9?

Membetulkan Jejari Sempadan dan Pendarahan Kecerunan Latar Belakang dalam IE9

Dalam Internet Explorer 9, sudut bulat dan kecerunan latar belakang boleh dilaksanakan secara berasingan menggunakan CSS3 jejari sempadan. Walau bagaimanapun, menggabungkan elemen ini selalunya mengakibatkan pendarahan kecerunan melepasi sudut bulat.

Untuk menyelesaikan isu ini, satu penyelesaian melibatkan pembalut elemen kecerunan dalam div yang mengandungi yang sepadan dengan dimensi dan nilai sudut bulatnya. Ini pada asasnya mencipta topeng yang mengehadkan kecerunan dalam kawasan yang dikehendaki.

HTML:

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

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 */
}

Pendekatan ini berkesan menutupi pendarahan kecerunan dengan memotongnya di sempadan sudut bulat. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa ia boleh menjejaskan interaktiviti dengan kandungan kecerunan asas.

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