Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Mencegah Pendarahan Gradien Latar Belakang dalam IE9 Apabila Menggunakan Jejari Sempadan?

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

Patricia Arquette
Patricia Arquetteasal
2024-10-27 07:22:02158semak imbas

How to Prevent Background Gradient Bleed in IE9 When Using Border-Radius?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn