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

Potongan Separuh Bulatan Lutsinar menggunakan CSS

Walaupun tiada segi empat tepat hitam dengan bulatan putih, anda boleh membuat separuh lutsinar -potongan bulatan menggunakan CSS3 sahaja. Kuncinya terletak pada menggunakan sifat pseudo ::selepas dengan bijak.

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);
}

Dalam kod ini, unsur .rect mewakili bentuk utama, manakala .circle dan unsur pseudo ::afternya bersama-sama membentuk potongan . Elemen ::after mencipta bentuk separuh bulatan yang diletakkan di belakang elemen .circle, mencipta ilusi potongan separuh bulatan. Latar belakang lutsinar bagi elemen ::after membolehkan warna latar belakang ditunjukkan, mencapai kesan yang diingini.

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