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

Linda Hamilton
Lepaskan: 2024-11-04 00:09:30
asal
944 orang telah melayarinya

How to Create a Circle with a Partial Border Using HTML5 and 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>
Salin selepas log masuk

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!

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