溢出：隱藏不是邊界半徑下隱藏元素

可能重複：
Rounding the sides of a big image contained in a small division not working in Chrome 溢出：隱藏不是邊界半徑下隱藏元素

我希望做的是有一個「庫」打開的用戶時鼠標在內部包裹元素上。我遇到的問題是（至少在Chrome中），「門」不會隱藏在內部換行元素的border-radius區域下。有沒有任何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; 
}

來源

2012-10-23 user1716372

做u想這像http://tinkerbin.com/DanvbwDW –

呀，酷似那個，但是Chrome的堆是粗魯的。 – user1716372

還有[如何使CSS3圓角在Chrome/Opera中隱藏溢出]（http://stackoverflow.com/a/10296258/681807） –

這似乎試圖一輪positioned元素的角落時，只在WebKit瀏覽器是一個問題。

的解決方案，如圖this answer，是一個-webkit-mask-image添加的元素與border-radius：

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

來源

2012-10-23 07:30:32

允許我愛你90000次。在我問這個問題之前，當我查看它時，或許會是一個更好的主意。乾杯c： – user1716372

@ user1716372沒問題 - 我第一次看到問題時花了一些時間找到原因:)不要忘記接受答案 –

溢出：隱藏不是邊界半徑下隱藏元素

回答

相關問題