前言：
最近在写一个截图的工具。需要实现一个类似pc端截图软件的阴影蒙层。
因为我要先创建框选框，并且大小是变化的。总结下大致有下面几种方案：
1. 使用半透明的边框
将边框设置的足够宽，覆盖整个屏幕,再设置边框颜色的透明度就可以实现类似的效果了。
border: 10000px soild rgba(0,0,0,0.35)
2.设置阴影
给框选框设置阴影，阴影扩散半径设置能覆盖整个屏幕，再设置阴影颜色透明度。
box-shadow: 0px 0px 0px 10000px rgba(0,0,0,0.35)
3.利用css clip-path属性
在绘制框选框的之前创建蒙层标签，设置背景色，宽高整个浏览器视口。利用css的clip-path属性来裁剪一个空心的矩形。
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
4.使用双层div
将整个屏幕截图并作为背景显示在两个div中，内层设置透明度，外层根据框选区域进行裁剪显示图片，也能达到类似的效果。
5.利用svg/canvas进行绘制
利用SVG或者canvas的绘图功能进行绘制阴影。实现还是比较繁琐的就没有去实践了。
最终考虑还是第一种和第二种比较方便。不需要获取元素的宽高就可以快速实现功能。
