Bagaimana untuk Membuat Sempadan Separa pada Bulatan Menggunakan CSS?

Membuat Bulatan dengan Sempadan Separa Menggunakan HTML5 / CSS3

Adakah mungkin untuk membuat bulatan dengan sempadan yang memanjang hanya sebahagiannya di sekeliling perimeternya menggunakan HTML5 / CSS3? Walaupun spesifikasi HTML5 dan CSS3 tidak menyokong ini secara langsung, terdapat teknik yang boleh mencapai kesan ini.

Kaedah CSS Sahaja

Kaedah yang memerlukan JavaScript dan elemen luaran melibatkan memanipulasi topeng CSS:

.circular-progress {
  border: 1.5em solid 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
}

CSS ini mencipta elemen bulat dengan jidar merah jambu merah dan latar belakang separa telus. Topeng kecerunan kon meliputi peratusan elemen, bermula dari pukul 12 dan mengikut arah jam. Topeng kecerunan linear kemudian digunakan pada bahagian atas, terhad kepada kotak padding untuk mencipta kesan sempadan separa.

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