Bolehkah CSS Mencipta Jejari Sempadan Cekung?

Jejari Sempadan Cekung: Adakah Mungkin dengan CSS?

Dalam CSS, sifat jejari sempadan membolehkan kami membuat sudut bulat. Walau bagaimanapun, kesan lalai ialah cembung, bermakna sudut dibulatkan ke luar. Adakah mungkin untuk mencapai jejari sempadan cekung, di mana sudutnya dibulatkan ke dalam?

Walaupun ia tidak boleh dilakukan secara langsung dengan CSS tulen, kami boleh mensimulasikan kesan jejari sempadan cekung menggunakan kecerunan latar belakang. Begini caranya:

1. Buat dua kecerunan jejari yang menyerupai bentuk cekung yang diingini.
2. Letakkan dan ulangi kecerunan ini untuk menutup kawasan yang dikehendaki.

Contohnya:

#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;
}

Kod ini mencipta ilusi jejari sempadan cekung dengan menindih dua kecerunan jejari yang kedua-duanya bermula dari dan berakhir pada warna latar belakang elemen. Titik permulaan kecerunan masing-masing diletakkan pada -20% dan 120% daripada lebar elemen, menghasilkan kesan cekung.

Perhatikan bahawa teknik ini mungkin tidak disokong dalam semua penyemak imbas, jadi keserasian penyemak imbas perlu diambil kira jika melaksanakannya dalam pengeluaran.

Atas ialah kandungan terperinci Bolehkah CSS Mencipta Jejari Sempadan Cekung?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!