2024년에 CSS만 사용하여 부분 테두리가 있는 원형 도형을 만드는 방법은 무엇입니까?

HTML5/CSS3에서 부분 테두리가 있는 원 만들기

HTML5/CSS3을 사용하여 부분적으로 테두리가 보이는 원형 모양을 만들 때 짝수인지 의문이 생깁니다. 가능한. 이 기사에서는 2024 솔루션을 중심으로 이 효과를 달성하기 위한 다양한 기술을 살펴볼 것입니다.

2024 솔루션: 최첨단 접근 방식

2024 솔루션은 JavaScript, 추가 요소 또는 유사 요소 없이 작동합니다. 강요. CSS 선언에만 의존하며 반투명 배경에서도 탁월한 성능을 발휘합니다.

이 혁신적인 접근 방식에는 이중 레이어 마스크가 포함됩니다.

• 레이어 1(원뿔형- 그라데이션 마스크): 이 마스크는 테두리 상자를 기준으로 원뿔형 그라데이션을 활용하여 12시부터 시계 방향으로 원의 사용자 정의 가능한 부분(-p로 제어)을 드러냅니다.
• 레이어 2(전체 적용 마스크): 이 마스크는 패딩 상자 내의 전체 영역을 포함하여 테두리가 원의 경계 내에 단단히 유지되도록 합니다.

코드 스니펫

다음 코드 샘플은 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>

이 CSS 코드를 사용하면 이제 부분적으로 보이는 테두리가 있는 원형 모양을 쉽게 만들 수 있습니다. --p 변수는 테두리의 보이는 부분을 제어하는 ​​유연성을 제공하므로 다양한 디자인 요구 사항에 맞는 다목적 솔루션이 됩니다.

위 내용은 2024년에 CSS만 사용하여 부분 테두리가 있는 원형 도형을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!