Bagaimana Membuat Bulatan dengan Dua Sempadan Menggunakan CSS?

Cara Membuat Bulatan dengan Dua Sempadan

Menggayakan div ke dalam bulatan dengan dua sempadan secara responsif boleh dicapai dengan CSS. CSS div bulatan asal yang disediakan boleh diubah suai untuk mencipta kesan yang diingini:

div.circle {
  width: 90%;
  height: 0;
  padding-bottom: 90%;
  margin: auto;
  float: none;
  border-radius: 50%;
  background: pink;
  border: 1px solid green;
  box-shadow: 0 0 0 5px red; /* Adds a second red border */
}

Di sini, sifat bayang-kotak digunakan untuk mencipta sempadan kedua di sekeliling bulatan. Nilai 0 0 0 5px mentakrifkan offset, kabur dan hamparan bayang, manakala merah menentukan warna sempadan.

Pendekatan div dalam yang disebut dalam soalan boleh dilaksanakan dengan div tambahan di dalam div bulatan:

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

Div dalam boleh digayakan dengan warna latar belakang dan dijajarkan secara menegak menggunakan flexbox:

<code class="css">div.circle {
  display: flex;
  align-items: center;
  justify-content: center;
}

div.inner {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: blue;
}</code>

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