Bagaimana Membuat Bulatan dengan Dua Sempadan Berbeza Secara Responsif Menggunakan CSS?

Menggayakan Kalangan dengan Dwi Sempadan Secara Responsif

Membuat bulatan CSS adalah mudah, seperti yang ditunjukkan oleh CSS berfungsi yang disediakan. Walau bagaimanapun, untuk mencapai bulatan dengan dua sempadan yang berbeza, kita perlu menggunakan teknik CSS tambahan.

Menggunakan struktur HTML yang disediakan, di mana satu

elemen mewakili bulatan:

<code class="html"><div></div></code>

Kami boleh mengubah suai CSS seperti berikut untuk mencipta bulatan dengan dua sempadan:

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

CSS ini menambah jidar kedua menggunakan sifat kotak-bayang , yang mencipta bayang merah lebar 5px di sekeliling bulatan, dengan berkesan mencipta ilusi sempadan kedua. Warna jidar kedua ditentukan oleh nilai merah dalam sifat bayang kotak.

CSS yang disediakan mencapai kesan yang diingini, mencipta bulatan dengan dua sempadan berbeza yang bertindak balas dengan lancar kepada perubahan dalam saiz bekas.

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

css html using Property this border

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn