Webkit 브라우저에서 CSS3 둥근 모서리 오버플로 문제를 어떻게 해결할 수 있습니까?

CSS3 둥근 모서리 마스킹 오버플로: 크로스 브라우저 솔루션

웹 디자인 영역에서 둥근 모서리는 필수 디자인 요소가 되었습니다. . 그러나 상위 div에 적용하면 Chrome 및 Opera와 같은 웹킷 기반 브라우저에 오버플로 콘텐츠가 노출될 수 있습니다. 이 문제는 특히 상위 div가 상대적으로 또는 절대적으로 배치될 때 발생합니다.

Webkit/Opera 딜레마

Firefox 및 IE9에서 완벽하게 작동하는 아래 CSS 코드는, 이 버그로 인해 웹킷 기반 브라우저에서 실패합니다:

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

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

A 크로스 브라우저 솔루션

다행히도 여러 브라우저에서 이 문제를 해결하는 영리한 솔루션이 등장했습니다.

1. WebKit CSS 마스크 추가: -webkit-mask-image 속성을 단일 픽셀 PNG 이미지가 있는 상위 div에 추가합니다. HTTP 요청을 제거하려면 CSS 자체에 이미지를 삽입하세요.

업데이트된 코드:

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

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

이 솔루션은 원하는 동작인 마스킹을 다시 설정합니다. 웹킷 기반 브라우저에서도 둥근 모서리 안에 콘텐츠가 넘칩니다. 브라우저별 버그를 효과적으로 패치하고 다양한 플랫폼에서 일관된 스타일을 보장합니다.

위 내용은 Webkit 브라우저에서 CSS3 둥근 모서리 오버플로 문제를 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!