CSS를 사용하여 원에 부분 테두리를 만드는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

CSS를 사용하여 원에 부분 테두리를 만드는 방법은 무엇입니까?

Barbara Streisand

풀어 주다： 2024-11-02 12:34:02

원래의

330명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!