Bagaimanakah Saya Boleh Mencipta Sempadan Berganda untuk Elemen Pekeliling?

Bulatan dengan Sempadan Berganda

Dalam artikel ini, kami meneroka penyelesaian kepada cabaran menambah sempadan dua pada elemen bulatan. Segi empat sama dan segi empat tepat mudah digunakan untuk sempadan berganda, tetapi menggunakan teknik yang sama pada bulatan memerlukan pendekatan yang lebih kreatif.

Pertimbangkan CSS yang disediakan dalam pernyataan masalah, yang menghasilkan div bulat dengan sempadan hijau tunggal:

div.circle {
  width: 90%;
  height: 0;
  padding-bottom: 90%;
  margin: auto;
  float: none;
  border-radius: 50%;
  border: 1px solid green;
  background: pink;
}

Objektif kami adalah untuk mengubah suai CSS ini untuk mencipta sempadan berganda. Sifat garis besar sebelum ini dicuba tanpa kejayaan, kerana ia menghasilkan garisan segi empat tepat. Div bersarang dan warna latar belakang juga terbukti tidak berkesan disebabkan oleh isu penjajaran.

Untuk mencapai kesan yang kami inginkan, kami mengubah suai CSS seperti berikut:

div {
  width: 20em;
  height: 20em;
  border-radius: 50%;
  background-color: red;
  border: 4px solid #fff;
  box-shadow: 0 0 0 5px red;
}

CSs ini mencipta div dengan putih pepejal sempadan dan bayang dalaman merah. Sifat bayangan kotak meniru jidar kedua dengan menayangkan inset berwarna dari tepi div.

Perbezaan utama antara penyelesaian ini dan percubaan sebelumnya terletak pada penggunaan bayangan kotak dan bukannya jidar atau garis besar kedua. Dengan menggunakan bayangan kotak secara kreatif, kami mencapai ilusi sempadan berganda tanpa mengorbankan bentuk bulat.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Sempadan Berganda untuk Elemen Pekeliling?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!