CSS를 사용하여 직사각형에서 원을 효율적으로 잘라낼 수 있나요?

CSS를 사용하여 직사각형 모양에서 원 자르기

직사각형 모양에서 잘라낸 투명한 원을 만드는 도전이 시작되었습니다. 온라인 토론. 일부 솔루션이 존재하지만 사용자가 대안을 찾도록 만드는 제한 사항과 버그가 있습니다.

방사형 그라데이션을 사용한 대체 접근 방식

초기 솔루션에 대한 한 가지 대안 접근 방식은 다음과 같습니다. 상위 요소에 방사형 그래디언트를 사용합니다. 이 그라데이션은 원형 모양을 만드는 반면 의사 요소는 실제 원을 정의하는 데 사용됩니다. 이 단순화된 마크업은 여러 div가 필요하지 않으며 IE 10/11과 관련된 버그를 해결합니다.

div:before {  /* creates the red circle */
  position: absolute;
  content: '';
  width: 90px;
  height: 90px;
  top: -75px;  /* top = -75px, radius = 45px, so circle's center point is at -30px */
  left: calc(50% - 45px);
  background-color: red;
  border-radius: 50%;
}
div {
  position: relative;
  margin: 100px auto 0 auto;
  width: 90%;
  height: 150px;
  border-radius: 6px;  
  
  /* only the below creates the transparent gap and the fill */
  background: radial-gradient(50px 50px at 50% -30px, rgba(0, 0, 0, 0) 49.5px, rgba(0, 0, 0, .8) 50.5px);  /* use same center point as with concentric circles but larger radius */
}

이 방사형 그라데이션 접근 방식을 활용하면 직사각형 모양에서 원을 효과적으로 잘라낼 수 있습니다. 이전 솔루션의 한계를 극복하고 다양한 브라우저 간의 호환성을 보장합니다.

위 내용은 CSS를 사용하여 직사각형에서 원을 효율적으로 잘라낼 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!