設定了border-radius的元素overflow:hidden失效解決方法
阿新 • • 發佈:2018-12-26
父元素設定圓角、overflow:hidden之後,當子元素中設定了transform後,父元素的overflow:hidden在圓角的地方失效了,解決方法:父元素加:position:relative; z-index:1; 就可以了
demo程式碼如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" /> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Expires" content="0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <meta name="apple-mobile-web-app-title" content=""> <title>test</title> <style> body{ color:#d00;} .box , .box2 , .box3{ width:120px; height:120px; margin:10px auto; border-radius:50%; border:#d00 solid 10px; overflow:hidden;} .box{/* position:relative; z-index:1;*/} .box2{/* position:relative; z-index:1;*/} .box3{ position:relative; z-index:1;} .box img{ width:100%; height:100%; -webkit-transform:/*perspective(500px) */rotate(0); transform:/*perspective(500px) */rotate(0); } .box2 img , .box3 img{ width:100%; height:100%; -webkit-transform:perspective(500px) rotate(0); transform:perspective(500px) rotate(0); } </style> </head> <body> <p style="text-align:center;">overflow:hidden 正常:</p> <div class="box"> <img src="https://avatar.csdn.net/D/5/3/3_qq_16494241.jpg" /> </div> <p style="text-align:center;">============================================</p> <p style="text-align:center;">overflow:hidden 失效:圖片加了 transform:perspective(500px) rotate(0);</p> <div class="box2"> <img src="https://avatar.csdn.net/D/5/3/3_qq_16494241.jpg" /> </div> <p style="text-align:center;">============================================</p> <p style="text-align:center;">overflow:hidden 正常:overflow:hidden 失效後,父元素加 position:relative; z-index:1;</p> <div class="box3"> <img src="https://avatar.csdn.net/D/5/3/3_qq_16494241.jpg" /> </div> </body> </html>