Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana Membuat Bulatan dengan Dua Sempadan Menggunakan CSS?

Bagaimana Membuat Bulatan dengan Dua Sempadan Menggunakan CSS?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-11-02 05:31:02785semak imbas

How to Create a Circle with Two Borders Using 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!

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