如何在Chrome/Opera中使CSS 3圓角隱藏溢出我需要圓角上的父母div，以掩蓋它的孩子的內(nèi)容。overflow: hidden在簡單的情況下工作，但是在基于Webkit的瀏覽器和Opera中，當(dāng)父的位置相對或絕對的位置時會中斷。這適用于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實例謝謝你的幫助！最新情況：導(dǎo)致這一問題的缺陷已在Chrome中修復(fù)。不過，我還沒有重新測試過Opera或Safari。
3 回答
繁花不似錦
TA貢獻(xiàn)1851條經(jīng)驗 獲得超4個贊
#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;
}
添加回答
舉報
0/150
提交
取消