需求：后台给了一个规规矩矩的头像，或圆或方，UI要求展示成水滴的形状。正在想到底如何实现的时候，不由自主去翻了鑫神的博客，正好找到了答案，窃喜（·_·)
UI给的形状：
后台给的头像（忽略橙色背景色，我加的...）
最终需要的效果：
PS：被覆盖图像的宽高与目标形状图越接近越好
废话不多说，贴代码：(本栗子截取的是小程序的代码片段，同样适用于普通h5页，只是标签不同而已·.·)
wxml片段：
<view class="avatar1-box">
<image src="../../images/zhangyixing_120.png" class="avatar1"></image>
</view>
wxss片段：
.avatar1-box {
width: 280px;
height: 337px;
-webkit-mask-image: url('../../images/1st-avatar-mask.png'); //蓝色水滴形状图
mask-image: url('../../images/1st-avatar-mask.png'); //蓝色水滴形状图
-webkit-mask-size: 100% 100%;
mask-image-size: 100% 100%;
}
.avatar1 {
width: 337px;
height: 337px;
}
参考文章：https://www.zhangxinxu.com/wordpress/2017/11/css-css3-mask-masks/