css - 溢出：隐藏不隐藏边界半径下的元素

Question

可能重复：
舍入包含在一个小分区中的大图像的侧面在 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;
}

Answer 1

positioned在尝试对元素进行圆角处理时，这似乎仅在 Webkit 浏览器中是一个问题。

如this answer所示，解决方案是将 a 添加-webkit-mask-image到元素中border-radius：

div.vault-door-1, div.vault-door-2 {
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}