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

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

특정 시각적 효과를 추구하는 과정에서 많은 개발자는 특히 시도할 때 마크업 및 호환성 문제에 직면합니다. CSS를 사용하여 직사각형 안에 원형 컷아웃을 만듭니다.

이러한 문제를 해결하고 CSS 기술에 대한 이해를 높이기 위해 대체 접근 방식을 살펴보겠습니다. 원하는 결과를 달성하십시오. 상위 요소의 방사형 그라데이션 배경과 원형 컷아웃의 의사 요소를 활용하여 마크업을 단순화하고 IE 10/11에서 1px 간격 문제를 제거할 수 있습니다.

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로 표시되는 요소는 빨간색 원형 컷아웃을 정의합니다. 이는 우리가 달성하려는 원형 구멍을 반영하여 상위 div 내에서 수평으로 중앙에 절대적으로 배치되고 중앙에 배치됩니다. background-color 및 border-radius 속성은 시각적 모양을 설정합니다.

상위 div는 컷아웃을 포함하도록 상대적으로 배치되며 직사각형 배경을 제공합니다. 테두리 반경은 모서리를 둥글게 하여 컷아웃과 직사각형 사이를 부드럽게 전환합니다.

상위 div의 방사형 그라데이션 배경은 투명한 간격과 채우기 효과를 얻는 데 중요합니다. 방사형 그래디언트는 원의 중심점(50% -30px에서 50px 50px)에서 시작하여 바깥쪽으로 확장되어 투명에서 반투명 검정색으로 부드러운 전환을 만듭니다. 그라디언트의 반경을 신중하게 조정하여 직사각형에 원형 구멍이 잘린 듯한 느낌을 줍니다.

이 접근 방식은 여러 요소를 사용하는 것에 비해 더 간단한 마크업을 제공하고 IE 10/에서 발생하는 1px 간격 문제를 제거합니다. 11. 원하는 시각적 효과를 얻기 위해 CSS 속성에만 의존하여 유지 관리성과 브라우저 간 호환성을 향상시킵니다.

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