IOS端微信小程序 CSS3图片变色、drop-shadow不显示等问题

.imgbox{ height: 150px; width: 150px; overflow: hidden; background-color: #f1f1f1; }
.imgbox image{ height: 150px;width: 150px;border-right: 150px solid transparent; transform: translateX(-150px); filter:drop-shadow( 150px 0px red);}

  

效果图

ios端会有一个问题,就是图片被隐藏后,drop-shadow有时候会失效,就是被隐藏的不会被渲染,所以需要给图片加上border-right 值,这样虽然图片被“overflow: hidden”了,但是border还在外边,这样就会被渲染。
安卓和网页端相关没有border-right依然能正常显示。

你可能感兴趣的:(IOS端微信小程序 CSS3图片变色、drop-shadow不显示等问题)