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:
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!