引导页面的蒙版镂空和屏幕适配，技巧

需求

实现一个遮罩蒙版引导

实现难点

• 镂空蒙版实现方案
• 箭头图片的大小和位置的屏幕适配

实现方案

镂空蒙版实现

1. 方案一：切图，直接使用镂空的图片去实现效果
   • 缺陷：图片的宽高是固定的，唯有按比例缩放才能保证图片不变形，但是实际的设备屏幕尺寸并不是统一的尺寸比例，这样一来就很容易导致镂空部分的变形
2. 方案二：使用css自带的mask属性
   • 缺陷：只兼容webkit内核，支持性暂时太差了
3. 方案三：使用超级宽的border来实现遮罩

• 问题：使用方形的镂空可以方便的铺满屏幕和实现定位 ，如何实现圆形的镂空？
• 解决：
  • 方法1：是元素设置超大圆角，但是，此时为了边框依然填满整个屏幕，border边框尺寸要大大增大，但是，为了不影响页面的滚动条，我们必须再嵌套一层标签，并且定位的实现也会增加难度。
  • 方法2：则是方法1某些方面的逆向思维处理，就是把当前元素