<image class='card-img' src='{{item.cardImage}}' mode='widthFix'></image>
.card-img {
width:300rpx;
margin-bottom:80rpx;
-webkit-box-reflect:below 0 linear-gradient(transparent,transparent 65%,rgba(0,0,0,.3));
border-radius:10px;
}
这个是image组件的class样式,添加-webkit-box-reflect:below 0 linear-gradient(transparent,transparent 65%,rgba(0,0,0,.3));会有投影,但是圆角就消失了,不知道什么原因,在h5页面这个样式写法没有问题,求大神指导一下。
box-shadow和-webkit-box-reflect效果不一样,这是-webkit-box-reflect的效果:
border-radius: 50%;
/* 圆形 投影 */
box-shadow: 0rpx 0rpx 40rpx 10rpx rgba(222, 53, 88, 0.3);