css蒙层和新手引导的实现方式

开发当中经常用到新用户引导，弹出蒙层的场景。入下图，想提醒用户底部有一个发表按钮，正文是一个feeds晒单。

那如何处理呢？

左边的情况，可能你会用一张图片悬浮在底部的icon之上，倒是可以实现。但是右边的就有点困难了，因为第一条feeds是在变化的，你总不能固定用一张图片（其实也可以吧，只要产品不找你事，哈哈）。

那右边这个我们怎么做呢？(这里是用下面的第二种方案实现的,box-shadow)

1、border的实现。

    使用border的方式来实现，参照如下方式，可以任何设置border边框透明。border且可以实现多种三角形。

.border1 {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid red;
  border-left: 50px solid transparent;
}

.border2 {
  width: 0;
  height: 0;
  border-top: 50px solid black;
  border-right: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 50px solid transparent;
}

.border3 {
  width: 0;
  height: 0;
  border-right: 10px solid transparent;
  border-bottom: 40px solid rgba(0, 0, 0, 0.5);
  border-left: 100px solid transparent;
}

.border4 {
  width: 0;
  height: 0;
  border-top: 40px solid black;
  border-left: 100px solid transparent;
}

.border5 {
  width: 0;
  height: 0;
  border-top: 25px solid black;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
}

.border6 {
  position: relative;
  z-index: 1;
  width: 50px;
  height: 50px;
  border-top: 100px solid rgba(0, 0, 0, 0.5);
  border-right: 100px solid rgba(0, 0, 0, 0.5);
  border-bottom: 100px solid rgba(0, 0, 0, 0.5);
  border-left: 100px solid rgba(0, 0, 0, 0.5);
}

.border7 {
  position: relative;
  z-index: 1;
  width: 100px;
  height: 100px;
  border-top: 100px solid rgba(0, 0, 0, 0.5);
  border-right: 100px solid rgba(0, 0, 0, 0.5);
  border-bottom: 100px solid rgba(0, 0, 0, 0.5);
  border-left: 100px solid rgba(0, 0, 0, 0.5);
  border-radius: 50%;
}

2、box-shadow的实现方式。

    使用box-shadow来实现，比如box-shadow: 1px 1px 1px 2000px rgba(0,0,0,.8);

box-shadow: h-shadow v-shadow blur spread color inset;

设置一个阴影，阴影的尺寸达到了2000px，就是一个足够大的值.本质上就是上面悬浮一个dev，是一个透明的div,它的background-color:transparent，他的阴影区域足够大，充满了这个div之外的区域。如果需要区域可点击，设置pointer-events:none。那么点击仍然会透传到底部的区域。

<div class="guide_wrap" style="top: 108px;left: 207px;width: 197px;height: 281px;border-radius: 4px;background-color: transparent;">
</div>

    pointer-events: none;
    position: fixed;
    box-shadow: 1px 1px 1px 2000px rgba(0,0,0,.8);
    -webkit-appearance: none;
    z-index: 999;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    top: 72px;
    left: 15px;

3、z-index来设置。

使用z-index来实现。把需要透明显示的层级显示最高。如下层级为1，2，3，这种方式，呈现突出来的元素，且该元素就是底部的元素，且可以响应点击事件