CSSを使用して円に部分的な境界線を作成するにはどうすればよいですか?

HTML5 / CSS3 を使用して部分的な境界線を持つ円を作成する

周囲の一部のみに広がる境界線を持つ円を作成することは可能ですか?その周囲はHTML5 / CSS3を使用していますか? HTML5 および CSS3 の仕様はこれを直接サポートしていませんが、この効果を達成できる手法はあります。

CSS のみのメソッド

最小限の JavaScript と外部要素には 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 は、ホットピンクの境界線と半透明の背景を持つ円形要素を作成します。円錐グラデーション マスクは、12 時から時計回りに、要素の一定の割合をカバーします。次に、線形グラデーション マスクが上部に適用され、パディング ボックスに制限され、部分的な境界線効果が作成されます。

以上がCSSを使用して円に部分的な境界線を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。