Bagaimana untuk Mencipta Bentuk Pekeliling dengan Sempadan Separa Menggunakan Hanya CSS pada 2024?

Mencipta Kalangan dengan Sempadan Separa dalam HTML5/CSS3

Apabila ditugaskan untuk mencipta bentuk bulat dengan jidar separa boleh dilihat menggunakan HTML5/CSS3, persoalan timbul jika ia genap mungkin. Artikel ini akan meneroka pelbagai teknik untuk mencapai kesan ini, memfokuskan pada penyelesaian 2024.

Penyelesaian 2024: Pendekatan Termaju

Penyelesaian 2024 beroperasi tanpa JavaScript, elemen tambahan atau pseudo- elemen. Ia hanya bergantung pada pengisytiharan CSS dan berprestasi sangat baik walaupun dengan latar belakang separa telus.

Pendekatan inovatif ini melibatkan topeng dua lapisan:

• Lapisan 1 (Conic- Topeng Kecerunan): Topeng ini menggunakan kecerunan kon berbanding kotak sempadan, mendedahkan bahagian boleh disesuaikan (dikawal oleh --p) bulatan, bermula dari jam 12 mengikut arah jam.
• Lapisan 2 (Topeng Liputan Penuh): Topeng ini merangkumi keseluruhan kawasan dalam kotak padding, memastikan sempadan kekal kukuh dalam perimeter bulatan.

Kod Coretan

Sampel kod berikut mempamerkan penyelesaian 2024:

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

/* To demonstrate compatibility with semi-transparent backgrounds */
body {
  background: 
    url(https://images.unsplash.com/photo-1693483923875-cdd9ef4a8046?w=800) 
      50%/ cover
}</code>

<code class="html"><div class="circular-progress"></div></code>

Dengan kod CSS ini, anda kini boleh mencipta bentuk bulat dengan jidar yang sebahagiannya boleh dilihat dengan mudah. Pembolehubah --p memberikan fleksibiliti dalam mengawal bahagian sempadan yang boleh dilihat, menjadikannya penyelesaian serba boleh untuk pelbagai keperluan reka bentuk.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Bentuk Pekeliling dengan Sempadan Separa Menggunakan Hanya CSS pada 2024?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!