div渐变遮罩效果：纵向和水平反向渐变遮罩效果，让戛然而止的页面多一丝丝淡淡的过渡效果，温柔中透露着一缕缕优雅...

 ​​​

-webkit-mask-image: linear-gradient(transparent, white 20px, white calc(100% - 20px),transparent);//上下两端的渐变白色（兼容IOS）

---

左右水平渐变遮罩

-webkit-mask-image: linear-gradient(to right, transparent, white 20px, white calc(100% - 20px), transparent);//左右两端的渐变白色（兼容IOS）

总结

以上是生活随笔为你收集整理的div渐变遮罩效果：纵向和水平反向渐变遮罩效果，让戛然而止的页面多一丝丝淡淡的过渡效果，温柔中透露着一缕缕优雅...的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。