web-dev-qa-db-ja.com

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の例

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

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

htmlcssrounded-cornerscss3
146
jmotes

誰も気にせず、ラッパーとボックスの間に追加の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/

56
jmotes

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

180
graycrow

境界線で囲まれたアイテムにz-indexを追加すると、その中のものがマスクされます。

103
Jackolai

不透明度：0.99;ラッパーでwebkitのバグを解決

18
flavi1

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

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

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

15
nakrill

最新の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/ ！

8
antoni

答えではありませんが、これはChromiumソースの下で報告されたバグです。 http://code.google.com/p/chromium/issues/detail?id=6236

残念ながら、それに取り組んでいる人はいないようです。 :(

6
ryan

境界線を持つ親要素の不透明度を変更すると、スタックされた要素が再編成されます。これは、何時間もの研究と失敗した試みの後、私にとって奇跡的に働きました。 0.99の不透明度を追加して、ブラウザのこのペイントプロセスを再編成するのと同じくらい簡単でした。チェックアウト http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

4
Rami Awar

graycrowの優れた答えに基づいて...

次に、フィラーコンテンツを含む2つの特定のdivを含む、より現実的な例を示します。ハードコードされたpng背景を16進数値に置き換えました。

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

に置き換えられます

-webkit-mask-image:#fff;

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

2
gts101

私に関しては、ソリューションはどれもうまくいきませんでした。

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

ラッパー要素でジョブを実行しました。

ここに例： http://jsfiddle.net/gpawlik/qWdf6/74/

2
Grzegorz Pawlik

ここで私がそれをどうやってやったか見てみましょう。 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;
}
1
Maze

画像のマスクを作成してコンテナ内に画像を配置する場合は、「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;
        }
    }
0
user6039997