CSS3的border-radius属性无法隐藏内容溢出元素框部分(overflow:hidden)解决方案。

情景介绍：

<div class='box'>

 <img src='xxx.jpg'/>

</div>

box设置的是

border-radius:50%;
overflow:hidden;

那么就是一个圆了，

img设置CSS样式

img{transition:all 0.4s ease-in-out;}

img:hover{transform:scale(1.2);}

意思是鼠标移动到图片的时候图片放大为1.2倍大小。

打开看下效果，

2.jpg

当鼠标移动的时候会出现这么个情况，我图片本身就是个圆形的，放大时发现border-radius之外的部分没有被隐藏而是继续展示了，否则就不会出现这种情况，如果是一个完整的图片那么他会铺满box的，显然不是我们想要的。

解决办法：

设置img为绝对定位，设置box的position（不是static就可以了）并设定z-index

找一张图试一下吧