CSSを使用して円に部分的な境界線を作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Barbara Streisand

リリース： 2024-11-02 12:34:02

オリジナル

329 人が閲覧しました

How to Create a Partial Border on a Circle Using 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 サイトの他の関連記事を参照してください。