如何在Chrome/Opera中使CSS 3圓角隱藏溢出我需要圓角上的父母div,以掩蓋它的孩子的內容。overflow: hidden在簡單的情況下工作,但是在基于Webkit的瀏覽器和Opera中,當父的位置相對或絕對的位置時會中斷。這適用于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實例謝謝你的幫助!最新情況:導致這一問題的缺陷已在Chrome中修復。不過,我還沒有重新測試過Opera或Safari。
3 回答

繁花不似錦
TA貢獻1851條經驗 獲得超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;
}
- 3 回答
- 0 關注
- 670 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消