Bagaimana Menggayakan Bulatan Responsif dengan Dua Sempadan?

Menggayakan Bulatan dengan Dua Sempadan Secara Responsif

Untuk menggayakan bulatan dengan dua jidar yang menyesuaikan diri dengan saiz bekas, anda boleh menggunakan pendekatan berikut:

<div></div>

<code class="css">div {
  width: 20em;
  height: 20em;
  border-radius: 50%;
  background-color: red;
  border: 4px solid #fff;
  box-shadow: 0 0 0 5px red;
}</code>

Struktur ini mencipta bulatan dengan sempadan putih pepejal dan sempadan dalam merah yang diwakili oleh sifat bayang-kotak. Bayang kotak dengan berkesan mencipta ilusi sempadan kedua dengan memanjangkan warna latar belakang melepasi tepi bulatan. Pendekatan ini memastikan penggayaan bulatan kekal responsif, melaraskan dimensi dan penampilannya berdasarkan saiz bekas.

Atas ialah kandungan terperinci Bagaimana Menggayakan Bulatan Responsif dengan Dua Sempadan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!