Bagaimana untuk Mencipta Kesan \'Jejari Sempadan Terbalik\' dalam CSS?

Cara Mencapai Kesan "Jejari Sempadan" Terbalik

Apabila mereka bentuk tapak web moden, menambah elemen gaya seperti tab atau bar navigasi boleh meningkatkan pengalaman pengguna. Satu kesan yang diingini ialah membuat tab dengan "jejari sempadan terbalik", di mana bucunya dibundarkan ke arah yang menghala ke luar dan bukannya ke dalam.

Memandangkan sifat jejari sempadan asli CSS tidak menyokong nilai negatif, mencapai kesan ini memerlukan pendekatan yang berbeza. Satu penyelesaian ialah menggunakan elemen tambahan dalam bekas tab, diletakkan secara strategik di luar tab sebenar. Elemen ini harus mempunyai warna latar belakang yang sepadan dengan latar belakang halaman, pada dasarnya menyembunyikannya daripada paparan. Kemudian, menggunakan jejari sempadan pada elemen ini mencipta ilusi sudut bulat terbalik.

Berikut ialah contoh menggunakan CSS tulen:

<code class="css">#main {
  margin: 40px;
  height: 100px;
  background-color: #004C80;
  position: relative;
  overflow: hidden;
}

#main div {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  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>

Pendekatan ini menghasilkan " terbalik kesan jejari sempadan" dengan memanjangkan sudut bulat secara berkesan di luar sempadan tab. Ia adalah cara yang mudah dan berkesan untuk mencapai gaya visual yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Kesan 'Jejari Sempadan Terbalik' dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!