Bagaimana Anda Boleh Membuat Jejari Sempadan Cekung dengan CSS?

Jejari Sempadan Cekung: Ilusi dengan Kecerunan Jejari

Mencapai jejari sempadan cekung dengan CSS sahaja mungkin kelihatan seperti tugas yang mustahil, memandangkan nilai jejari sempadan negatif tidak menghasilkan kesan. Walau bagaimanapun, terdapat penyelesaian yang bijak menggunakan kecerunan jejarian.

Untuk mencipta ilusi sempadan cekung, kami boleh menggunakan berbilang kecerunan jejari yang diletakkan di sekeliling tepi elemen kami. Berikut ialah contoh:

<code class="css">#test {
    width: 200px;
    height: 200px;
    background: #888888;
    background:
      radial-gradient(circle 20px at -20% 50%, transparent, transparent 100px, #888888 100px),
      radial-gradient(circle 20px at 120% 50%, transparent, transparent 100px, #888888 100px);
    background-size: 100px 200px, 100px 200px;
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
}</code>

Dengan meletakkan kecerunan jejari dengan teliti dan melaraskan jejarinya, kita boleh mencipta kesan sempadan cekung, seperti yang ditunjukkan dalam imej yang disediakan. Adalah penting untuk ambil perhatian bahawa sokongan untuk kecerunan jejari berbeza-beza merentas penyemak imbas dan penyemak imbas yang lebih lama mungkin memerlukan sintaks tambahan untuk memastikan keserasian.

Atas ialah kandungan terperinci Bagaimana Anda Boleh Membuat Jejari Sempadan Cekung dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!