2

重複の可能性:
Chrome で機能しない小さな区画に含まれる大きな画像の側面を丸める

私がやりたいのは、ユーザーが内側のラップ要素の上にマウスを置いたときに開く「ボールト」を持つことです。私が遭遇した問題は、(少なくとも Chrome では) 「ドア」が内側のラップ要素の境界半径領域の下に隠されていなかったことです。これを修正する CSS のみの方法はありますか、それとももう少し複雑なものを検討する必要がありますか?

HTML:

<div class="vault-wrap-1">

    <div class="vault-wrap-2">

        <div class="vault-door-1"></div>

        <div class="vault-door-2"></div>

    </div>

</div>

CSS:

div.vault-wrap-1 {
    height:600px;
    width:600px;
    border-radius:9999px;
    background:green;
    margin:auto;
    padding:30px;
}

div.vault-wrap-2 {
    height:600px;
    width:600px;
    border-radius:9999px;
    background:blue;
    overflow:hidden;
}

div.vault-door-1, div.vault-door-2 {
    height:600px;
    width:300px;
    background:red;
}

div.vault-door-1 {
    float:left;
}

div.vault-door-2 {
    float:right;
}
4

1 に答える 1

2

positionedこれは、要素の角を丸めようとする Webkit ブラウザーでのみ問題になるようです。

この回答に示されているように、解決策は-webkit-mask-image、要素にa を追加することborder-radiusです:

div.vault-door-1, div.vault-door-2 {
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
于 2012-10-23T07:30:32.343 に答える