Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Membuat Potongan Pekeliling dalam Segi Empat Menggunakan Hanya CSS?

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

Susan Sarandon
Lepaskan: 2024-12-12 19:05:18
asal
409 orang telah melayarinya

How Can I Create a Circular Cutout in a Rectangle Using Only 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);
}
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan