Chrome / Opera에서 CSS3 둥근 모서리가 오버플로를 숨기는 방법

자녀의 콘텐츠를 마스킹하려면 부모 div에 둥근 모서리가 필요합니다. overflow: hidden간단한 상황에서는 작동하지만 부모가 상대적으로 또는 절대적으로 위치하면 웹킷 기반 브라우저 및 Opera에서 작동하지 않습니다.

이것은 Firefox 및 IE9에서 작동합니다.

CSS

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

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

HTML

<div id="wrapper">
  <div id="box"></div>
</div>

JSFiddle의 예

도와 주셔서 감사합니다!

업데이트 : 이 문제를 일으키는 버그는 Chrome에서 수정되었습니다. 그러나 Opera 또는 Safari를 다시 테스트하지 않았습니다.

이 문제에 대한 다른 해결책을 찾았습니다. 이것은 WebKit (또는 아마도 Chrome)의 다른 버그처럼 보이지만 작동합니다. WebWit CSS 마스크 를 #wrapper 요소 에 추가하기 만하면됩니다. 단일 픽셀 png 이미지를 사용하고 CSS에 포함시켜 HTTP 요청을 저장할 수도 있습니다.

#wrapper {
width: 300px; height: 300px;
border-radius: 100px;
overflow: hidden;
position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */

/* this fixes the overflow:hidden in Chrome */
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

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

JSFiddle 예제

z-index를 border-radius의 항목에 추가하면 그 안에있는 것들이 가려집니다.

모두에게 신경 쓰지 마십시오. 래퍼와 상자 사이에 div를 추가하여 문제를 해결할 수있었습니다.

CSS

#wrapper {
    position: absolute;
}

#middle {
    border-radius: 100px;
    overflow: hidden; 
}

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

HTML

<div id="wrapper">
    <div id="middle">
        <div id="box"></div>
    </div>
</div>

도와 주신 모든 분들께 감사드립니다!

→ http://jsfiddle.net/5fwjp/

불투명도 : 0.99; 랩퍼에서 웹킷 버그 해결

이것이 작동하는 것 같습니다 :

.wrap {
    -webkit-transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

http://jsfiddle.net/qWdf6/82/

최신 크롬, 오페라 및 사파리에서 지원되며 다음과 같이 할 수 있습니다.

-webkit-clip-path: inset(0 0 0 0 round 100px);
clip-path: inset(0 0 0 0 round 100px);

당신은 확실히 도구 http://bennettfeely.com/clippy/를 확인해야합니다 !

답변은 아니지만 Chrome 소스 ( http://code.google.com/p/chromium/issues/detail?id=62363 )에서 제기 된 버그입니다 .

불행히도, 누군가 작업하고있는 것처럼 보이지 않습니다. :(

테두리가있는 부모 요소의 불투명도를 변경하면 쌓인 요소가 다시 구성됩니다. 이것은 몇 시간의 연구와 실패한 시도 후에 기적적으로 작동했습니다. 이 브라우저의 페인트 프로세스를 재구성하기 위해 불투명도 0.99를 추가하는 것만 큼 간단했습니다. http://philipwalton.com/articles/what-no-one-told-you-about-z-index/를 확인 하십시오.

나에 관해서는 다음 중 하나만 사용하여 제대로 작동하지 않았습니다.

-webkit-mask-image: -webkit-radial-gradient(circle, white, black);

랩퍼 요소에서 작업을 수행했습니다.

예를 들면 다음과 같습니다. http://jsfiddle.net/gpawlik/qWdf6/74/

그레이 크로우의 탁월한 답변을 바탕으로 ...

다음은 필러 내용이 포함 된 두 개의 cicular div가있는보다 실제적인 예입니다. 하드 코딩 된 png 배경을 16 진수 값으로 바꿨습니다.

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

로 대체

-webkit-mask-image:#fff;

이 JSFiddle을 참조하십시오 ... http://jsfiddle.net/hqLkA/

여기 내가 어떻게했는지 보자. JS 피들

내가 넣은 코드를 사용하여 Webkit (Chrome / Safari) 및 Firefox에서 작동하게했습니다. 최신 버전의 Opera에서 작동하는지 모르겠습니다. 예, 최신 버전의 Opera에서 작동합니다.

#wrapper {
  width: 300px; height: 300px;
  border-radius: 100px;
  overflow: hidden;
  position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */
}

#box {
  width: 300px; height: 300px;
  background-color: #cde;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -o-border-radius: 100px;
}

나는 모든 대답을 시도했지만 성공하지 못했습니다. 몇 시간 동안 조사한 결과이 문제에 대한 해결책을 찾았습니다. 클래스에서이 속성을 사용하면 div 요소가 컨테이너를 오버플로 할 수 없습니다.

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

이미지 마스크를 만들고 이미지를 컨테이너 내부에 배치하려는 경우 'position : absolute'속성을 설정하지 마십시오. 여백 왼쪽과 여백 오른쪽을 변경하기 만하면됩니다. Chrome / Opera는 오버플로 : 숨김 및 경계 반경 규칙을 준수합니다.

// Breaks in Chrome/Opera.
    .container {
        overflow: hidden;
        border-radius: 50%;
        img {
            position: absolute;
            left: 20px;
            right: 20px;
        }
    }

// Works in Chrome/Opera.
    .container {
        overflow: hidden;
        border-radius: 50%;
        img {
            margin-left: 20px;
            margin-right: 20px;
        }
    }