图片hover且设置transform其父级border-radius失效

最近一个项目中提出了一个奇葩问题，开始踌躇了一番，经过研究发现有点意思，拿出来分享一下。

如上图：鼠标经过的时候图片的圆角失效，transform完成之后圆角恢复。经过测试发现谷歌、火狐正常，但是360浏览器、QQ浏览器等其他浏览器出现此BUG。

经过一番查阅资料，网友提供一种办法：给图片父级加” transform: rotate(0deg);-webkit-transform:rotate(0deg); “确实解决了问题。

看似加上的属性跟此BUG毫无关系，但是经过与同事讨论得出一个结论，图片transform期间层级大于其父级，导致显示直角。 所以尝试把rotate(0deg)改成其他的设置发现同样生效。

具体代码：

<div class="img">  
        <img src="01.jpg">  
</div>  

.scale{   width: 300px;  height: 200px;   overflow: hidden;    border-radius: 10px;  
                    transform:scale(1);  
            -webkit-transform:scale(1);  
 }  
 .scale img{   transition: all 0.3s;  }  
 .scale:hover img{   transform: scale(1.2);  } 

---

其实还有两种方式可以解决此问题：
方法一：图片遮挡
可以切4个角，设置定位且层级比图片高，覆盖在图片上面可以挡住图片的直角

方法二：mask-image()
可以制作一张png图片或者svg都行，见下图：

注意：图片填充的是黑色部分

具体代码：

<div class="img">  
        <img src="01.jpg">  
</div>  

.scale{   width: 300px;  height: 200px;   overflow: hidden;    border-radius: 10px;  
                    mask-image: url("mask.png");  
            -webkit-mask-image:url("mask.png"); 
 }  
 .scale img{   transition: all 0.3s;  }  
 .scale:hover img{   transform: scale(1.2);  }