Bagaimanakah Saya Boleh Membuat Potongan Separuh Bulatan Lutsinar Menggunakan CSS3 Sahaja?

Mencipta Potongan Separuh Bulatan Lutsinar dengan CSS3

Untuk mencapai bentuk separuh bulatan lutsinar yang dikehendaki, di mana semua elemen kekal hitam atau lutsinar , teknik menggunakan CSS ::after pseudo property boleh digunakan.

Helahnya terletak pada gabungan pintar segi empat tepat hitam dan bulatan. Segi empat tepat berfungsi sebagai asas, memberikan latar belakang hitam. Di atas ini, bulatan diletakkan secara mutlak dan sebahagiannya tersembunyi menggunakan sifat limpahan.

Kunci kepada teknik ini ialah elemen pseudo ::selepas ditambahkan pada bulatan. Dengan lebar dan ketinggian ditetapkan kepada 100px, ia membentuk separuh bulatan yang sempurna. Jidar setebal 40px digunakan, tetapi latar belakang kekal telus.

Dengan melaraskan kedudukan elemen pseudo ::selepas, separuh bulatan boleh dianjak ke atas untuk menjajarkan dengan tepi segi empat tepat, mewujudkan ilusi potongan.

Berikut ialah contoh kod yang menunjukkan perkara ini teknik:

body {
  background: green;
}

.rect {
  height: 100px;
  width: 100px;
  background: rgba(0, 0, 0, 0.5);
  position: relative;
  margin-top: 100px;
  margin-left: 100px;
}

.circle {
  display: block;
  width: 100px;
  height: 50px;
  top: -50px;
  left: 0;
  overflow: hidden;
  position: absolute;
}

.circle::after {
  content: '';
  width: 100px;
  height: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0);
  position: absolute;
  top: -100px;
  left: -40px;
  border: 40px solid rgba(0, 0, 0, 0.5);
}

<div class="rect">
  <span class="circle"></span>
</div>

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Potongan Separuh Bulatan Lutsinar Menggunakan CSS3 Sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!