如何防止CSS3的圆角Box图像溢出
如何防止CSS3的圆角Box图像溢出
在做项目的时候,使用了css3图片放大功能,即:transform:scale(1, 1)。父元素已经设置了overflow:hidden剪切,但在苹果手机端和Safari浏览器,图片并未实现剪切。
看代码:
.pics {
width : 200px;
height : 150px;
position : relative;
overflow : hidden;
border-radius : 10px;
}
.pics img {
height : 100%;
max-width : initial !important;
display : block;
position : absolute;
left : 50%;
top : 50%;
transition: .3s;
transform : scale(1, 1) translate3d(-50%, -50%, 0);
}
.pics:hover img {
transform: scale(1.1, 1.1) translate3d(-45.5%, -45.5%, 0);
}
以上代码,在电脑端Chrome浏览器完全没问题,来,用手机看看效果,圆角不见啦。但在Safari浏览器下,就出现了问题,大家可以试试
解决办法
在父元素上加上:transform:rotate(0deg);
.pics {
width : 200px;
height : 150px;
position : relative;
overflow : hidden;
border-radius : 10px;
-webkit-transform: rotate(0deg);
-moz-transform : rotate(0deg);
-ms-transform : rotate(0deg);
-o-transform : rotate(0deg);
transform : rotate(0deg);
}
请用手机看效果,是不是正常啦
全部评论 0
抢沙发