Bagaimanakah Saya Boleh Mencapai Jejari Sempadan Terbalik dalam CSS?

Jejari Sempadan Terbalik: Meneroka CSS dan Penyelesaian Bukan Asli

Dalam usaha untuk reka bentuk yang inovatif, persoalan mewujudkan "terbalikkan "jejari sempadan sering timbul. Walaupun jejari sempadan lazim dalam reka bentuk web, ia biasanya menggunakan sudut bulat pada bahagian dalam elemen. Walau bagaimanapun, untuk mencapai kesan sudut bulat pada bahagian luar, seperti yang digambarkan oleh anak panah HITAM dalam imej yang disediakan, memerlukan pendekatan alternatif.

Had CSS Asli

Orang asli Jejari sempadan sifat CSS tidak menyokong nilai negatif, menjadikannya mustahil untuk menyongsangkan kesan secara langsung. Perpustakaan seperti yang dicadangkan dalam balasan pengguna melaksanakan kesan ini dengan mencipta elemen HTML tambahan untuk meniru penampilan yang diingini.

Pendekatan CSS Tulen

Dengan menggunakan CSS semata-mata, seseorang boleh cipta ilusi jejari sempadan terbalik dengan meletakkan elemen tambahan dengan teliti:

1. Tentukan bekas (#utama) dan tambahkan empat elemen anak (div) pada kedudukan mutlak.
2. Tetapkan latar belakang warna elemen kanak-kanak untuk dipadankan dengan latar belakang halaman.
3. Letakkan elemen kanak-kanak sedikit di luar bekas menggunakan jidar negatif.
4. Gunakan jejari sempadan pada elemen kanak-kanak, mencipta kesan yang diingini.

Contoh:

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

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

Pendekatan ini menyediakan penyelesaian CSS tulen untuk jejari sempadan terbalik, sambil mengakui batasan sempadan asli- jejari.

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