Bagaimana untuk Mencegah Pendarahan Gradien dengan Sudut Bulat dalam Internet Explorer 9?

Jejari Sempadan dan Kecerunan Latar Belakang IE9: Menangani Isu Pendarahan

Internet Explorer 9 (IE9) menyokong kedua-dua jejari sempadan CSS3 dan latar belakang kecerunan, tetapi menggabungkan ciri ini menimbulkan cabaran. Kecerunan berdarah keluar dari sudut bulat, menghasilkan kesan visual yang tidak diingini.

Memahami Masalah

Untuk menggambarkan isu ini, pertimbangkan imej berikut. Imej pertama menunjukkan tingkah laku yang dijangkakan, di mana tiada pendarahan kecerunan tetapi sudutnya tajam. Imej kedua mempamerkan pendarahan yang berlaku apabila kecerunan dan bucu bulat digabungkan.

[URL Imej: https://i.sstatic.net/lCBe6.png]

[URL Imej: https://i.sstatic.net/BbZ0D.png]

Sesuatu Melintas: Menggunakan Teknik Topeng

Satu penyelesaian untuk masalah ini ialah dengan menggunakan teknik penyamaran . Ini melibatkan penambahan div pembalut di sekeliling elemen dengan kecerunan dan sudut bulat. Div masking harus mempunyai dimensi yang sama, nilai sudut bulat dan limpahan ditetapkan kepada tersembunyi.

Kod HTML:

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

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

Dengan menggunakan penyelesaian ini, topeng menyembunyikan kecerunan yang berdarah di luar sudut bulat, menyelesaikan isu pendarahan.

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Pendarahan Gradien dengan Sudut Bulat dalam Internet Explorer 9?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!