Chrome 및 Opera에서 둥근 모서리로 넘쳐나는 콘텐츠를 가리는 방법은 무엇입니까?

Chrome 및 Opera에서 둥근 모서리로 오버플로 숨기기

질문:

어떻게 할 수 있나요? Chrome에서 적절한 오버플로 동작을 유지하면서 하위 항목의 콘텐츠를 성공적으로 마스크하는 둥근 모서리가 있는 상위 div를 만듭니다. Opera?

Overflow: Hidden

Firefox 및 IE9와 같은 브라우저에서 둥근 모서리가 있는 상위 div에 "overflow: Hidden"을 적용하면 모든 항목을 효과적으로 숨길 수 있습니다. 넘치는 콘텐츠. 그러나 웹킷 기반 브라우저(Chrome, Safari) 및 Opera에서는 상위 div가 상대적으로 또는 절대적으로 배치되면 이 접근 방식이 실패합니다.

해결책: WebKit Mask

대체 솔루션은 상위 div에서 웹킷 마스크를 사용하는 것입니다. 이 접근 방식은 둥근 모서리 외부 영역을 가려서 넘치는 콘텐츠를 효과적으로 숨깁니다.

구현:

이 솔루션을 구현하려면 상위 div에 다음 CSS를 추가하세요.

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

이 CSS 속성은 단일 픽셀 투명 PNG 이미지를 참조합니다. 이를 방지하기 위해 CSS에 직접 포함될 수 있습니다. 추가 HTTP 요청.

예:

다음 코드를 고려하세요.

#wrapper {
  width: 300px;
  height: 300px;
  border-radius: 100px;
  overflow: hidden;
  position: absolute; /* original CSS that broke overflow in webkit browsers */
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* webkit mask fix */
}

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

<div>

이 수정 사항을 통합하면 둥근 모서리가 이제 Chrome 및 Opera에서 넘쳐나는 콘텐츠를 효과적으로 숨기므로 시각적으로 깨끗하고 반응성이 뛰어납니다. 디자인.

위 내용은 Chrome 및 Opera에서 둥근 모서리로 넘쳐나는 콘텐츠를 가리는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!