CSS 페인트 API : 둥근 모양-CSS 튜토리얼-php.cn

CSS 페인트 API : 둥근 모양

尊渡假赌尊渡假赌尊渡假赌

풀어 주다： 2025-03-18 09:30:17

원래의

300명이 탐색했습니다.

CSS 페인트 API : 둥근 모양

CSS가있는 복잡한 모양에 둥근 모서리를 마스터하는 것은 어려울 수 있습니다. CSS Paint API는 우아한 솔루션을 제공합니다! "CSS Paint API 탐색"시리즈의 일부인이 기사는이를 달성하는 방법을 보여줍니다.

CSS 페인트 API 시리즈 탐색 :

1 부 : 이미지 조각화 효과
2 부 : Blob Animation
3 부 : 다각형 테두리
파트 4 : 반올림 모양 (이 기사)

현재 Chrome and Edge가 지원하는이 기술은 깨끗한 CSS 전용 접근 방식을 제공하여 유지 보수 및 코드 이해를 단순화합니다.

페인트 API의 대안

복잡한 모양을 반올림하기위한 다른 방법이 존재하지만, 종종 SVG를 포함하고 조정 및 유지 가능성에 대한 과제가 있습니다. 여기에는 다음이 포함됩니다.

`clip-path: path()`

이 SVG 기반 접근법은 모양이 사전 정의 된 경우 간단하지만 곡률 또는 크기를 수정하려면 복잡한 경로 편집이 필요합니다.

SVG 필터

Lucas Bebber의 Gooey Effect 튜토리얼에서 볼 수 있듯이 SVG 필터를 사용하면 코너 반올림이 가능합니다. 그러나 여전히 조정에 대한 상당한 SVG 전문 지식이 필요합니다.

Ana Tudor의 CSS 전용 방법

Ana Tudor의 혁신적인 CSS 전용 기술은 대안을 제공하지만, 특히 투명성 또는 이미지와 함께 다양한 시나리오를 구현하고 조정하는 것은 복잡 할 수 있습니다.

CSS 페인트 API 솔루션

CSS Paint API는보다 관리하기 쉬운 솔루션을 제공합니다. 이 접근법은 이전 기사에서 다각형 테두리 예제와 유사한 구조를 활용합니다.

CSS 설정

우리는 간단한 사각형으로 시작하여 clip-path: polygon() 과 유사한 --path 변수를 사용하여 모양을 정의합니다. Clippy는 이러한 경로를 생성하는 데 도움을 줄 수 있습니다.

 .상자 {
  디스플레이 : 인라인 블록;
  높이 : 200px;
  너비 : 200px;
  -경로 : 50% 0,100% 100%, 0 100%;
  -radius : 20px;
  -webkit 마스크 : 페인트 (둥근 모양);
}

로그인 후 복사

--path 변수는 모양을 정의하고 --radius 코너 곡률을 제어합니다.

JavaScript 구현

JavaScript 코드는 경로 세그먼트에 중간 점을 추가하고 arcTo() 함수를 사용하여 매끄러운 둥근 모서리를 생성합니다. arcTo() 의 제어점 사용을 이해하는 것이 중요합니다. 코드는 포인트를 통해 반복되어 중간 점을 계산하고 arcTo() 적용하여 둥근 모양을 생성합니다. 반경 값이 큰 오버플로를 방지하기 위해 반경 한계가 구현됩니다.

(JavaScript 코드는 Brevity에 대해 생략되었지만 원본 기사에 자세히 설명)

마지막 단계는 원하는 시각적 효과를 달성하기 위해 모양을 채우거나 쓰다듬는 것입니다.

단점 및 솔루션

기본 단점은 가공 할 수있는 영역 (마스크를 사용하여 상호 작용에 영향을 미치는)과 반경 값이 큰 잠재적 오버플로입니다. 호버 가능한 영역 문제는 테두리의 의사 요소에 두 번째 마스크를 사용하여 해결되며, 오버플로 문제는 모양의 형상에 따라 반경을 동적으로 제한하여 처리됩니다.