溢出:隐藏不隐藏边框半径下的元素

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

这似乎只是在 Webkit 浏览器中尝试在positioned元素上圆角时的问题。

解决方案，如本答案所示，是使用以下border-radius向元素添加一个-webkit-mask-image：

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