Bagaimanakah Saya Boleh Membuat Potongan Pekeliling dalam Segi Empat Menggunakan Hanya CSS?

Mencipta Potongan Pekeliling daripada Bentuk Segi Empat menggunakan CSS

Soalan yang dikemukakan mencari pendekatan alternatif untuk mencapai potongan bulat dalam bentuk segi empat tepat . Penyelesaian awal menggunakan gabungan elemen dan sempadan, menghasilkan kesan yang memuaskan tetapi kekurangan tanda bersih dan menghadapi pepijat dalam penyemak imbas tertentu.

Kaedah Alternatif

Lagi penyelesaian elegan melibatkan penggunaan satu elemen (bersama dengan unsur pseudo) dan menggunakan latar belakang kecerunan jejari. Berikut ialah CSS yang disemak:

div:before {
  position: absolute;
  content: '';
  width: 90px;
  height: 90px;
  top: -75px;
  left: calc(50% - 45px);
  background-color: red;
  border-radius: 50%;
}
div {
  position: relative;
  margin: 100px auto 0 auto;
  width: 90%;
  height: 150px;
  border-radius: 6px;
  
  background: radial-gradient(50px 50px at 50% -30px, rgba(0, 0, 0, 0) 49.5px, rgba(0, 0, 0, .8) 50.5px);
}

Penjelasan

• Unsur pseudo (:before) mencipta potongan merah bulat dengan dimensi 90px dan meletakkannya di dalam elemen induk.
• Elemen induk mempunyai jejari lutsinar kecerunan yang memenuhi kawasan selebihnya, mencipta bentuk segi empat tepat dengan potongan.
• Jejari kecerunan lutsinar adalah lebih besar sedikit daripada jejari potongan, membenarkan celah lutsinar nipis di sekeliling tepi.
• Pemusatan bulatan dan jurang lutsinar dikawal melalui peletakan pusat kecerunan jejarian titik.

Kaedah dikemas kini ini menangani kedua-dua kebimbangan penanda bersih dan pepijat penyemak imbas yang ditemui dalam penyelesaian awal. Ia menyediakan potongan bulat yang lancar dan menarik secara visual daripada bentuk segi empat tepat menggunakan CSS sahaja.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Potongan Pekeliling dalam Segi Empat Menggunakan Hanya CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!