????

-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渐变遮罩效果：纵向和水平反向渐变遮罩效果，让戛然而止的页面多一丝丝淡淡的过渡效果，温柔中透露着一缕缕优雅...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。