Bagaimanakah Saya Boleh Mencipta Sudut Bulat Terbalik dalam CSS Menggunakan Teknik Moden dan Mengekalkan Keserasian Merentas Pelayar?

Teknik Inovatif untuk Sudut Bulat Terbalik dalam CSS

Mencapai kesan visual yang diingini bagi sudut bulat terbalik boleh menjadi satu cabaran, terutamanya dalam rentas- senario pelayar. Walau bagaimanapun, kemajuan CSS menawarkan penyelesaian inovatif untuk menentang batasan ini.

Penyelesaian CSS Moden untuk Sudut Bulat Songsang

Dalam pelayar moden, imej topeng harta muncul sebagai kunci untuk mencipta kesan songsang ini. Sifat ini membolehkan anda mentakrifkan imej untuk digunakan sebagai lapisan pelindung di atas elemen, dengan berkesan "memotong" bentuk yang diingini.

Pertimbangkan contoh berikut:

#aux-container {
  width: 100px;
  height: 100px;
  background: #f00;
  -webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 20px, black 21px);
}

Dalam ini coretan, kami mentakrifkan unsur #aux-container dengan latar belakang merah pepejal. Kami kemudian menggunakan imej topeng kecerunan jejarian yang mentakrifkan potongan bulat dengan jejari 10px. Ini mencipta ilusi sudut bulat terbalik, dengan berkesan "memotong" sudut dari latar belakang merah.

Pertimbangan Keserasian

Sementara imej topeng disokong oleh moden pelayar seperti Chrome, Firefox dan Safari, adalah penting untuk mengambil perhatian sokongan terhadnya dalam Internet Explorer. Untuk keserasian penyemak imbas yang lebih luas, pertimbangkan untuk menggunakan perpustakaan pihak ketiga seperti CSS Masks, yang menyediakan sokongan merentas penyemak imbas.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Sudut Bulat Terbalik dalam CSS Menggunakan Teknik Moden dan Mengekalkan Keserasian Merentas Pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!