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

Potong Lubang Pekeliling dalam Bentuk Segi Empat dengan CSS

Dalam mengejar kesan visual tertentu, banyak pembangun menghadapi cabaran dengan isu markup dan keserasian, terutamanya apabila mencuba untuk membuat potongan bulat dalam bentuk segi empat tepat menggunakan CSS.

Untuk menangani kebimbangan ini dan meningkatkan pemahaman tentang Teknik CSS, mari kita meneroka pendekatan alternatif untuk mencapai hasil yang diinginkan. Dengan menggunakan latar belakang kecerunan jejari pada elemen induk dan elemen pseudo untuk potongan bulat, kami boleh memudahkan penanda dan menghapuskan isu jurang 1px dalam IE 10/11.

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

Pseudo- elemen, diwakili oleh :before, mentakrifkan potongan bulat merah. Ia benar-benar diposisikan dan berpusat secara mendatar dalam div induk, mencerminkan lubang bulat yang kami sasarkan untuk capai. Sifat warna latar belakang dan jejari sempadan menetapkan penampilan visualnya.

Div induk diletakkan secara relatif untuk mengandungi potongan dan menyediakan latar belakang segi empat tepat. Jejari sempadan mengelilingi penjurunya, mewujudkan peralihan yang lancar antara potongan dan segi empat tepat.

Latar belakang kecerunan jejari pada div induk adalah penting untuk mencapai jurang telus dan kesan pengisian. Kecerunan jejari bermula dari titik tengah bulatan (50px 50px pada 50% -30px) dan mengembang ke luar, mencipta peralihan lembut daripada hitam lutsinar kepada separa lutsinar. Dengan melaraskan jejari kecerunan dengan teliti, kami mencipta ilusi lubang bulat yang dipotong ke segi empat tepat.

Pendekatan ini menawarkan penandaan yang lebih mudah berbanding menggunakan berbilang elemen dan menghapuskan isu jurang 1px yang dialami dalam IE 10/ 11. Ia bergantung semata-mata pada sifat CSS untuk mencapai kesan visual yang diingini, meningkatkan kebolehselenggaraan dan keserasian merentas pelayar.

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