Bagaimana untuk Membuat Bulatan dengan Sempadan Separa Menggunakan HTML5 dan CSS3?

Membuat Bulatan dengan Sempadan Separa dalam HTML5 / CSS3

Memang boleh membuat bulatan dengan sempadan separa menggunakan HTML5 dan CSS3. Satu teknik yang berkesan melibatkan penggunaan pelbagai lapisan topeng untuk mencapai kesan yang diingini.

Penyelesaian 2024:

Kaedah ini menggunakan dua lapisan topeng tanpa memerlukan JavaScript, tambahan unsur, atau pseudos. Ia kekal berfungsi walaupun apabila elemen mempunyai latar belakang separa telus. Ia melibatkan:

1. Menubuhkan elemen bulat (lebar sewenang-wenangnya, nisbah bidang 1, jejari sempadan 50%), dengan sempadan tertentu.
2. Menentukan topeng kecerunan kon berbanding dengan kotak sempadan, meliputi peratusan tertentu keluasan elemen (cth., 17%).
3. Menambah lapisan topeng penutup penuh terhad kepada kotak padding.

Berikut ialah contoh coretan kod CSS:

<code class="css">.circular-progress {
  border: solid 1.5em hotpink;
  width: 50vmin;
  aspect-ratio: 1;
  border-radius: 50%;
  background: hsla(180, 100%, 50%, .5);
  mask:
    linear-gradient(red 0 0) padding-box,
    conic-gradient(red var(--p, 17%), transparent 0%) border-box;
}

/* for visual clarity with a semi-transparent background */
body {
  background: url(image-url) 50%/cover;
}</code>

Kaedah ini berkesan dalam mencipta bulatan dengan jidar separa dan ia kekal tidak terjejas oleh ketelusan latar belakang elemen.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Bulatan dengan Sempadan Separa Menggunakan HTML5 dan CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!