HTML5 및 CSS3를 사용하여 부분 테두리가 있는 원을 만드는 방법은 무엇입니까?

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

HTML5 및 CSS3를 사용하여 부분 테두리가 있는 원을 만드는 것이 실제로 가능합니다. 한 가지 효과적인 기술은 원하는 효과를 얻기 위해 여러 레이어의 마스크를 사용하는 것입니다.

2024 솔루션:

이 방법은 JavaScript가 필요 없이 두 개의 마스킹 레이어를 활용하며, 추가 요소 또는 의사. 요소에 반투명 배경이 있는 경우에도 기능은 유지됩니다. 여기에는 다음이 포함됩니다.

1. 지정된 테두리를 사용하여 원형 요소(임의 너비, 종횡비 1, 테두리 반경 50%) 설정
2. 원추형 그라데이션 마스크 정의 테두리 상자를 기준으로 요소 영역의 특정 비율을 차지합니다(예: 17%).
3. 패딩 상자로 제한된 전체 커버 마스크 레이어를 추가합니다.

다음은 CSS 코드 조각의 예입니다.

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

/* for visual clarity with a semi-transparent background */
body {
  background: url(image-url) 50%/cover;
}</code>

이것은 방법은 부분 테두리가 있는 원을 만드는 데 효과적이며 요소의 배경 투명도에 영향을 받지 않습니다.

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