Chrome/Opera에서 CSS3 'border-radius'가 오버플로되는 이유는 무엇이며 어떻게 해결할 수 있나요?

Chrome/Opera에서 CSS3 둥근 모서리의 오버플로 문제를 해결하는 방법

특정 상황에서는 CSS3의 border-radius 속성을 사용하여 둥근 모서리를 만듭니다. 상위 div의 모서리로 인해 Chrome 및 Opera 브라우저에서 콘텐츠 오버플로가 발생할 수 있습니다. 이 문제는 부모가 상대적으로 또는 절대적으로 위치할 때 발생합니다.

원래 접근 방식

다음 코드는 Chrome/Opera의 문제를 보여줍니다.

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

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

Firefox 및 IE9에서 작동하는 이 접근 방식은 Chrome/Opera.

향상된 솔루션

해결책에는 WebKit CSS 마스크를 #wrapper 요소에 추가하는 것이 포함됩니다.

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

이 접근 방식은 다음을 사용합니다. 넘쳐나는 콘텐츠를 마스크하는 CSS 마스크를 정의하는 단일 픽셀 PNG 이미지. 둥근 모서리를 유지하면서 Chrome/Opera의 오버플로 문제를 효과적으로 해결합니다.

위 내용은 Chrome/Opera에서 CSS3 'border-radius'가 오버플로되는 이유는 무엇이며 어떻게 해결할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!