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倍大小。
打开看下效果,
当鼠标移动的时候会出现这么个情况,我图片本身就是个圆形的,放大时发现border-radius之外的部分没有被隐藏而是继续展示了,否则就不会出现这种情况,如果是一个完整的图片那么他会铺满box的,显然不是我们想要的。
解决办法:
设置img为绝对定位,设置box的position(不是static就可以了)并设定z-index
找一张图试一下吧