如果一個父元素設置了overflow:hidden屬於的同時還設置了border-radius屬性，那么如果想隱藏超出的子元素，四個圓角處會出現超出圓角依然顯示的bug；
一種方法是運用-webkit-mask-image通過遮罩來實現，先不談該方法兼容性的問題，對於復雜形狀的圖形該方法是很好用的，但是簡單的圓角bug就用遮罩有點殺雞用牛刀大感覺。
其實解決這個問題，只需在父元素同時設置transform: rotate(0deg)即可解決該問題，親測可行。
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。
猜您在找
解決 border-radius 元素在應用了 transform 的子元素 時overflow:hidden 失效的問題
微信小程序 CSS border-radius元素 overflow:hidden失效問題 iPhone ios 蘋果兼容問題
微信小程序 CSS border-radius元素 overflow:hidden失效問題 iPhone ios 蘋果兼容問題 偽類元素
border-radius屬性失效問題的解決辦法
移動端border-radius失效
overflow:hidden 失效問題
css overflow和border-radius一起用 解決圓角和滾動條一起用的問題
ios使用transform的時候圓角變方框，border-radius失效問題
border-radius屬性
border-radius無效