Bagaimana untuk Mencipta Sudut Scooped Terbalik dalam CSS Menggunakan Box-Shadow?

Mencipta Sudut Terbalik dengan CSS

Dalam kod CSS semasa anda, anda berhasrat untuk mencipta sudut terbalik. Kod yang disediakan menggunakan jejari sempadan untuk mencapai kesan sudut bulat. Walau bagaimanapun, untuk mencipta jejari cekung, kita boleh memanfaatkan sifat bayang kotak.

Teknik ini melibatkan langkah berikut:

1. Buat segi empat sama lutsinar dengan limpahan tersembunyi menggunakan CSS.
2. Tambahkan bulatan lutsinar pada segi empat sama menggunakan bayang kotak.
3. Letakkan bulatan secara strategik untuk mendedahkan hanya satu perempat daripada lilitannya.

Pendekatan ini menyediakan penyelesaian untuk mencipta sudut cekung. Di bawah ialah contoh coretan untuk menggambarkan kaedah:

 kedudukan: relatif;<br> lebar: 200px;<br> tinggi: 50px;<br> warna latar belakang: biru;<br> jejari sempadan: 9999px 0 0 9999px;<br> jidar: 30px;<br> text-align: center;<br> color: #fff;<br> padding-top: 10px;<br>}<h1 id="atas">atas,</h1><h1 id="bawah">bawah {</h1><p>kedudukan: mutlak;<br> tinggi: 30px;<br> lebar: 30px;<br> kanan: 0;<br> limpahan: tersembunyi;<br>}</p><h1 id="atas">atas {</h1><p>atas: -30px;<br>}</p><h1 id="bawah">bawah {</h1><p>bawah: -30px;<br>}</p><h1 id="atas-sebelum">atas::sebelum,</h1><h1 id="bawah-sebelum">bawah::sebelum {</h1><p>kandungan: '';<br> kedudukan: mutlak;<br> kanan: 0;<br> tinggi: 200%;<br> lebar: 200%;<br> jejari sempadan: 100%;<br> bayang kotak: 10px 10px 5px 100px biru;<br> z-index: -1;<br>}</p><h1 id="atas-sebelum">atas::sebelum {</h1><p>atas: -100%;<br>}</p>

Dalam kod ini, kami menggabungkan segi empat sama dengan limpahan tersembunyi dan bulatan dengan bayangan kotak untuk mencapai kesan jejari cekung yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Sudut Scooped Terbalik dalam CSS Menggunakan Box-Shadow?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!