WebKit 및 Opera에서 'overflow:hidden'이 포함된 둥근 모서리가 실패하는 이유는 무엇이며 어떻게 해결할 수 있습니까?

WebKit 및 Opera에서 CSS3 둥근 모서리로 숨겨진 오버플로 문제 해결

둥근 모서리 아래의 콘텐츠를 마스킹하려면 Overflow: 숨겨진 속성을 사용하는 경우가 많습니다. 그러나 이 기술은 상위 요소가 상대적으로 또는 절대적으로 위치할 때 WebKit 기반 브라우저(Chrome 포함) 및 Opera에서 오작동할 수 있습니다.

문제:

문제가 발생하면 다음 코드를 고려하세요.

#wrapper {
  width: 300px;
  height: 300px;
  border-radius: 100px;
  overflow: hidden;
  position: absolute;
}

#box {
  width: 300px;
  height: 300px;
  background-color: #cde;
}

이 경우 #wrapper div는 절대 위치에 있고 모서리가 둥글게 되어 있습니다. 그러나 #box div의 콘텐츠는 WebKit 기반 브라우저 및 Opera에서 둥근 모서리 밖으로 흘러나옵니다.

해결책: WebKit CSS 마스크

이 문제를 해결하기 위한 대체 솔루션 #wrapper 요소에 WebKit CSS 마스크를 사용하는 것입니다. 여기에는 단일 픽셀 PNG 이미지를 마스크로 사용하는 작업이 포함됩니다.

#wrapper {
  width: 300px;
  height: 300px;
  border-radius: 100px;
  overflow: hidden;
  position: absolute;
  /* This fixes the overflow in Chrome/Opera */
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

이 기술은 WebKit 기반 브라우저 및 Opera에서 오버플로를 성공적으로 숨기므로 둥근 모서리가 하위 요소의 콘텐츠를 효과적으로 마스킹할 수 있습니다.

위 내용은 WebKit 및 Opera에서 'overflow:hidden'이 포함된 둥근 모서리가 실패하는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!