设置 mask-class 的坑点 是，它是一个 渐变背景。你需要使用linear-gradient 来定义css渐变背景，而且渐变背景的本质是一个 background-image，于是当你发现渐变背景在鬼畜重复的时候，需要将background-repeat设置为 no-repeat，而当你设置了 no-repeat以后，发现渐变背景只能遮盖picker-view的一半大小的时候background-size，使这个 size 匹配你的 picker view大小，这里要加上 !important，不然不能覆盖默认值。

这里是一个 class:

.picker-mask {

  max-width: auto;

  background: rgb(0,240,244);

  background: linear-gradient(0deg, rgba(0,240,244,1) 0%,

                              rgba(121,255,250,0) 45%,

                              rgba(121,255,250,0) 55%,

                              rgba(163,255,118,1) 100%);

  background-size: 750px 300px !important;

  background-position: center center;

  background-repeat: no-repeat;

  z-index: 9;

}

或者直接看 下面这个 代码片段。

https://developers.weixin.qq.com/s/B0VrcbmD72ni

ps: 确实有点坑，基本就靠猜，几百次瞎猜以后，侥幸被我猜中。

在猜中之前，我采用了另外一种方法

给 mask-class 设置为 background: none !important; 让他彻底滚蛋。

给 picker-view 定义一个 class 加上 :before :after，然后自己定义 渐变背景，其中:after 用 transform 的 rotateY 倒过来， 并且要把 pointer-event: none 来确保这个 伪类层不会被点击。（当然，并没有在多种机型上测试过，鬼知道会不会有什么坑。）

mask-style未使用过

建议使用：mask-class