Cara Membuat Jejari Sempadan \'Terbalik\' dalam CSS: Panduan Komprehensif

Jejari Sempadan 'Terbalik': Panduan Komprehensif

Dalam bidang pembangunan web, mencapai kesan estetik yang diingini kadangkala memerlukan pendekatan yang tidak konvensional. Satu cabaran sedemikian ialah penciptaan jejari sempadan 'terbalik', di mana sudut bulat kelihatan ceruk dan bukannya menonjol.

Bolehkah CSS Asli Mengendalikan Penyongsangan?

Malangnya, CSS asli tidak menyediakan penyelesaian langsung untuk jejari sempadan terbalik. Seperti yang didokumenkan dalam MDN, nilai jejari sempadan negatif adalah tidak sah.

Penyelesaian Alternatif

1. Perpustakaan Luaran:

Perpustakaan pihak ketiga boleh memudahkan tugas mencipta kesan jejari sempadan terbalik. Walaupun sesetengah perpustakaan mendekati masalah dengan cara yang ketinggalan zaman, seperti menggunakan imej, pendekatan yang lebih baharu menawarkan penyelesaian yang lebih cekap.

2. CSS Tulen (Eksperimen):

Menggunakan CSS tulen, adalah mungkin untuk mensimulasikan kesan jejari sempadan terbalik dengan kedudukan pintar dan helah latar belakang. Ideanya adalah untuk mencipta elemen tambahan dengan jejari sempadan yang lebih kecil sedikit daripada elemen utama dan meletakkannya secara strategik di luar elemen utama. Dengan melaraskan warna latar belakang elemen tambahan ini untuk dipadankan dengan latar belakang halaman, kesan sudut bulat ceruk tercipta.

Pelaksanaan

Berikut ialah coretan kod untuk tulen Pelaksanaan CSS jejari sempadan terbalik:

<code class="css">#main {
  margin: 40px; /* Adjust margins for spacing */
  height: 100px;
  background-color: #004C80;
  position: relative;
  overflow: hidden; /* Prevent content from leaking out */
}

#main div {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 100%; /* Generous border-radius for the effect */
  background-color: #FFF;
}

.top { top: -10px; }
.bottom { bottom: -10px; }
.left { left: -10px; }
.right { right: -10px; }</code>

<code class="html"><div id="main">
  <div class="top left"></div>
  <div class="top right"></div>
  <div class="bottom left"></div>
  <div class="bottom right"></div>
</div></code>

Dengan melaraskan jejari sempadan dan kedudukan elemen tambahan ini, anda boleh memperhalusi kesan jejari sempadan terbalik seperti yang dikehendaki.

Atas ialah kandungan terperinci Cara Membuat Jejari Sempadan 'Terbalik' dalam CSS: Panduan Komprehensif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!