Bagaimana untuk Mencipta Kesan Jejari Sempadan Terbalik dalam CSS?

Mencipta Kesan Jejari Sempadan Terbalik

Soalan:

Bolehkah jejari sempadan terbalik kesan dicapai apabila sudut kelihatan melengkung ke dalam?

Jawapan:

Sifat jejari sempadan CSS asli tidak membenarkan nilai negatif yang akan menghasilkan kesan songsang. Walau bagaimanapun, berikut ialah pendekatan alternatif menggunakan CSS:

Tambah empat elemen tambahan dalam bekas, memastikan ia melepasi sedikit sempadannya. Elemen ini harus sepadan dengan warna latar belakang halaman, mewujudkan ilusi kandungan halaman di bawahnya. Letakkan elemen ini secara strategik di sekeliling sudut dan gunakan jejari sempadan untuk mencapai kesan songsang.

Coretan Kod:

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

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!