크롬/오페라에서 CSS3 둥근 모서리가 오버플로를 숨기도록 만드는 방법

크롬/오페라에서 CSS3 둥근 모서리가 오버플로를 숨기도록 만드는 방법

아이들의 콘텐츠를 숨기기 위해 부모 디브의 둥근 모서리가 필요합니다.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>

JSFidle의 예

도와주셔서 감사합니다!

업데이트: 이 문제를 일으키는 버그는 크롬에서 수정되었습니다.하지만 오페라나 사파리는 재테스트하지 않았습니다.

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

#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;
}

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

경계 반지름의 항목에 z 인덱스를 추가하면 항목 내부의 내용이 마스킹됩니다.

여러분 신경 쓰지 마세요, 저는 포장지와 상자 사이에 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/! 툴을 꼭 확인해야 합니다.

답은 아니지만, 이것은 크롬 소스 아래에 있는 파일 버그입니다: 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/

그레이크로우의 훌륭한 답변을 바탕으로...

여기 좀 더 실제적인 예가 있습니다. 두 개의 고리 모양의 디브와 약간의 필러 함량이 있습니다.하드 코딩된 png 배경을 16진수 값으로 교체했습니다.

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

로 대체됨

-webkit-mask-image:#fff;

이 JSFidle 보기...http://jsfiddle.net/hqLkA/

제가 어떻게 했는지 보세요; Jsfiddle.

입력한 코드로 웹킷(크롬/사파리)과 파이어폭스에서 작동할 수 있었습니다. 최신 버전의 오페라와 호환되는지 모르겠습니다. 네, 최신 버전의 오페라에서 작동합니다.

#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;
}

이미지에 대한 마스크를 만들고 이미지를 용기 내부에 배치하려는 경우 '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;
        }
    }

언급URL : https://stackoverflow.com/questions/5736503/how-to-make-css3-rounded-corners-hide-overflow-in-chrome-opera