그라디언트 배경에서 카드 및 쿠폰 레이아웃의 갭 효과를 달성하는 방법은 무엇입니까?

카드 쿠폰 기울기의 배경에서 갭 효과를 영리하게 인식

특히 그라디언트 배경에 직면 할 때 가장자리에 노치 효과를 우아하게 처리하는 방법은 쿠폰을 설계 할 때 일반적인 과제입니다. 이 기사는 CSS mask 속성을 기반으로 솔루션을 제공 하여이 효과를 쉽게 달성하는 데 도움이됩니다.

도전 : 그라디언트 배경 아래의 갭 퍼즐

카드 바우처 배경이 단색 인 경우 동일한 색상의 블록을 중첩하여 간격을 차단하십시오. 그러나 그라디언트 배경의 경우이 방법은 분명히 실패합니다. 그라디언트 효과를 유지하면서 어떻게 갭을 생성 할 수 있습니까?

해결책 : CSS mask 속성을 활용하십시오

CSS mask 속성은 강력한 이미지 마스킹 기능을 제공합니다. 방사형 구배를 사용하여 투명한 영역을 만들어 그라디언트 배경의 간격을 "파기"할 수 있습니다. 다음은 샘플 코드입니다.

 .card {
  -webkit-mask : Radial-Gradient (20px 20px, 투명 20px, #000 0에서 원); / * 사파리 및 크롬 */
  마스크 : 방사형 그레이드 (20px 20px에서 원, 투명 20px, #000 0); / * 기타 브라우저 */
}

이 코드는 방사형 구배를 사용하여 (20px, 20px) 중심의 원형 마스크를 만듭니다. 반경 20px 내 영역은 투명하고 나머지는 불투명하여 쿠폰의 왼쪽 상단에 원형 노치가 형성됩니다. 매개 변수의 원과 transparent 부품의 circle at 에서 좌표를 조정하여 노치의 위치와 크기를 제어 할 수 있습니다.

효과 디스플레이

다음 그림은이 방법으로 달성 한 카드 쿠폰 갭의 효과를 보여줍니다.

고급 및 확장

노치 모양과 위치를보다 유연하게 제어하려면 다른 유형의 그라디언트, 여러 mask 오버레이 및 SVG 마스크와 같은 고급 기술을 탐색 할 수 있습니다.

또한 일부 온라인 도구는보다 복잡한 카드 쿠폰 효과를 생성하는 데 도움이 될 수 있습니다.

• 온라인 도구 : 쿠폰 생성기 (https://www.php.cn/link/0cad5adfb5b36b908b4bfe0e47371e3b를 실제 링크로 교체하십시오)

CSS mask 속성을 합리적으로 사용하면 구배 배경에서 다양한 미세한 카드 바우처 갭 효과를 쉽게 달성하여 설계 효율성을 향상시킬 수 있습니다.

위 내용은 그라디언트 배경에서 카드 및 쿠폰 레이아웃의 갭 효과를 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!