亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在Chrome/Opera中使CSS 3圓角隱藏溢出

如何在Chrome/Opera中使CSS 3圓角隱藏溢出

繁華開滿天機 2019-07-04 15:10:51
如何在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個贊

我找到了另一個解決這個問題的方法。這看起來像WebKit(或者Chrome)中的另一個bug,但它可以工作。您所需要做的就是添加一個WebKit CSS掩碼到#Wrapper元素。您可以使用單個像素的PNG圖像,甚至可以將其包含到CSS中以保存HTTP請求。JSFiddle示例

#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;

}

JSFiddle示例


查看完整回答
反對 回復 2019-07-04
  • 3 回答
  • 0 關注
  • 670 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號