CSS3の角を丸くしてChrome / Operaのオーバーフローを隠す方法

子供からコンテンツをマスクするために、親divの角を丸くする必要があります。overflow: hidden単純な状況で機能しますが、親が比較的または絶対的に配置されている場合、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;
}

HTML

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

JSFiddleの例

助けてくれてありがとう！

更新：この問題の原因となったバグは、Chromeで修正されました。ただし、OperaやSafariの再テストは行っていません。

この問題の別の解決策を見つけました。これはWebKit（またはおそらくChrome）の別のバグのように見えますが、機能します。必要なのは、WebKit 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の例

border-radius'dアイテムにZ-indexを追加すると、その中にあるものが隠されます。

誰も気にしないでください。ラッパーとボックスの間に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; ラッパーでwebkitバグを解決する

これはうまくいくようです：

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

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

最新のchrome、opera、safariでサポートされています。これを行うことができます：

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

あなたは間違いなくツールhttp://bennettfeely.com/clippy/をチェックアウトする必要があります！

回答ではありませんが、これはChromiumのソースで報告されているバグです：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/

グレイクロウの優れた答えに基づいて...

これは、フィラーコンテンツを含む2つのcicular divを持つ、より現実的な例です。ハードコーディングされたpngの背景を16進値だけに置き換えました。

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

に置き換えられます

-webkit-mask-image:#fff;

このJSFiddleを参照してください... http://jsfiddle.net/hqLkA/

ここで私がそれをどのように行ったかを見てください。Jsfiddle

私が入れたコードを使用して、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;
        }
    }