CSS만 사용하여 직사각형에 원형 컷아웃을 어떻게 만들 수 있나요?

CSS를 사용하여 직사각형 모양에서 원형 컷아웃 만들기

제시된 질문은 직사각형 모양 내에서 원형 컷아웃을 만드는 대안적인 접근 방식을 모색합니다. . 초기 솔루션은 요소와 테두리의 조합을 사용하여 만족스러운 효과를 얻었지만 깔끔한 마크업이 부족하고 특정 브라우저에서 버그가 발생했습니다.

대체 방법

더 보기 우아한 솔루션에는 단일 요소(의사 요소와 함께)를 활용하고 방사형 그라데이션 배경을 사용하는 것이 포함됩니다. 수정된 CSS는 다음과 같습니다.

div:before {
  position: absolute;
  content: '';
  width: 90px;
  height: 90px;
  top: -75px;
  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;
  
  background: radial-gradient(50px 50px at 50% -30px, rgba(0, 0, 0, 0) 49.5px, rgba(0, 0, 0, .8) 50.5px);
}

설명

• 의사 요소(:before)는 90px 크기의 빨간색 원형 컷아웃을 만들고 위치를 지정합니다.
• 상위 요소에는 나머지 영역을 채우는 투명한 방사형 그라데이션이 있어 컷아웃이 있는 직사각형 모양.
• 투명 그라디언트의 반경은 컷아웃의 반경보다 약간 크므로 가장자리 주위에 얇고 투명한 간격이 허용됩니다.
• 원의 중심과 투명한 간격은 방사형 그래디언트의 중심점 배치를 통해 제어됩니다.

이 업데이트된 방법은 초기 마크업에서 발생한 깔끔한 마크업 문제와 브라우저 버그를 모두 해결합니다. 해결책. CSS만 사용하여 직사각형 모양에서 매끄럽고 시각적으로 보기 좋은 원형 컷아웃을 제공합니다.

위 내용은 CSS만 사용하여 직사각형에 원형 컷아웃을 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!