Bagaimana untuk Mencipta Potongan Separuh Bulatan Lutsinar dalam Div menggunakan Hanya CSS3?

Mencipta Potongan Separuh Bulatan Lutsinar dalam Div menggunakan CSS3

Untuk membina potongan separuh bulatan lutsinar dalam div hanya menggunakan CSS3 , warna latar belakang semua elemen yang membentuk bentuk mesti kekal sama ada hitam atau lutsinar. Teknik yang memenuhi keperluan ini melibatkan penggunaan sifat pseudo CSS ::after.

Berikut ialah contoh cara untuk mencapai kesan yang diingini:

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>

Pendekatan ini mencipta segi empat tepat dengan lapisan hitam dan bulatan separa lutsinar. Bulatan diletakkan secara mutlak untuk mencipta bentuk potongan lutsinar.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Potongan Separuh Bulatan Lutsinar dalam Div menggunakan Hanya CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!