Bolehkah Anda Membuat Jejari Sempadan Cekung dengan CSS?

Meneroka Sempadan Jejari Sempadan CSS: Mencapai Kesan Cekung

Kefleksibelan jejari sempadan CSS membolehkan penciptaan pelbagai gaya sempadan. Walaupun sempadan cembung mudah dicapai, persoalan timbul: adakah jejari sempadan cekung mungkin?

Percubaan dan Had

Percubaan awal untuk mencipta jejari sempadan cekung dengan menggunakan nilai negatif untuk jejari sempadan terbukti tidak membuahkan hasil. Ketidakupayaan ini berpunca daripada sifat jejari sempadan, yang sememangnya mewakili lengkung yang memanjang ke luar dari tepi.

Ilusi Berasaskan Kecerunan

Manakala sempadan bulat cekung sebenar tidak boleh dicapai menggunakan sempadan konvensional- jejari sahaja, adalah mungkin untuk memberikan ilusi lekuk melalui penggunaan bijak kecerunan jejari.

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>

Teknik ini mencipta dua kecerunan jejari: satu diposisikan pada tepi kiri dan satu lagi di sebelah kanan. Kecerunan beransur-ansur pudar daripada lutsinar kepada warna latar belakang, memberikan ilusi jidar melengkung ke dalam.

Pertimbangan Keserasian Penyemak Imbas

Perlu ambil perhatian bahawa kecerunan jejari memerlukan awalan vendor untuk keserasian dengan yang lebih lama pelayar. Pelayar webkit, contohnya, memerlukan awalan berikut:

<code class="css">background:
  -webkit-radial-gradient(circle 20px at -20% 50%,transparent,transparent 100px,#888888 100px),
  -webkit-radial-gradient(circle 20px at 120% 50%,transparent,transparent 100px,#888888 100px);</code>

Dengan menggabungkan kecerunan jejari dengan kedudukan yang teliti, anda boleh mencipta kesan jejari sempadan cekung, menambahkan sentuhan dimensi pada reka bentuk web anda.

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