Bagaimanakah Saya Boleh Mencipta Kesan Sempadan Cekung dalam CSS?

Menggunakan Kecerunan untuk Mencipta Kesan Cekung

Dalam CSS, jejari sempadan ialah alat yang berkuasa untuk menambah lengkung pada tepi elemen. Walau bagaimanapun, ia terhad kepada mencipta sempadan cembung, di mana lengkung membonjol ke luar. Bagaimana jika anda mahukan sempadan cekung, di mana lengkungnya menurun ke dalam?

Contoh: Sempadan Cembung

<code class="css">#test {
    width: 200px;
    height: 200px;
    background: #888888;
    border-radius: 50px;
}</code>

Percubaan Penyelesaian

Untuk mencipta sempadan cekung, anda boleh cuba menggunakan nilai negatif untuk jejari sempadan. Walau bagaimanapun, pendekatan ini tidak berfungsi dalam CSS.

Penyelesaian: Kecerunan Jejari

Walaupun anda tidak boleh mencipta sempadan cekung sebenar dengan CSS sahaja, anda boleh mensimulasikan kesan menggunakan kecerunan jejari. Kecerunan membenarkan anda mencipta peralihan yang lancar antara warna dan dengan menggunakan berbilang kecerunan, anda boleh mencipta ilusi tepi melengkung.

Pertimbangkan contoh berikut:

<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>

CSS ini mencipta dua kecerunan jejari yang bertindih membentuk tepi cekung. Kecerunan pertama bermula dengan bulatan lutsinar pada -20% dan beralih kepada warna pepejal #888888 pada 100%. Kecerunan kedua melakukan perkara yang sama, tetapi dari 120%.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Kesan Sempadan Cekung dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!