Bagaimana Membuat Bulatan dengan Dua Sempadan Berbeza Secara Responsif Menggunakan CSS?-tutorial css-php.cn

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

Mary-Kate Olsen

Lepaskan： 2024-11-02 01:38:30

asal

914 orang telah melayarinya

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

Salin selepas log masuk

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>

Salin selepas log masuk

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!