/tangtang5963/article/details/51276560
要实现遮罩层和部分区域高亮显示，这里的思路是应用了元素的border属性，将元素的四个border值设置的非常大，铺满整个屏幕，这样就实现了页面遮罩部分镂空的效果。
让遮罩层的的宽度和高度等于目标元素的宽度和高度，剩下的遮罩效果就是合理设置遮罩层四个border的值的大小，使遮罩层铺满整个屏幕。
我们想把引导效果做的更加好看一下，制作成椭圆的效果，需要用到css3的border-radius:50%;并且圈圈内带有模糊效果，如何实现？就需要用到css3的box-shadow: inset 0 0 5px 2px rgba(0,0,0,.75);这样一个属性。我们需要把当前元素作为外层限制标签，里面重新生成一个大尺寸伪元素，实现内层的高亮椭圆内边缘模糊效果，最终实现的效果如下如图所示：
由于我们的目标元素的宽度和高度是不固定的，我们可以设置各种元素的高亮效果，就不用在手动设置border的宽度来配合目标元素的宽度和高度，有没有一个通用的方法？这就需要用JS来实现啦，js的实现思路如下：
1 获取目标元素的宽度和高度，targetWidth,targetHeight
2 获取页面的宽度和高度,pageWidth,pageHeight
3 获取目标元素在页面中的位置,offsetTop,offsetLeft(目标元素距离 页面顶部的距离，距离页面左边的距离，包括页面的滚动条)
4 设置遮罩层的宽度和高度等于目标元素的宽度和高度
5 最重要的一步，设置 遮罩层的四个边框的大小是决定效果至关重要的一步。
上边框 =offsetTop
右边框 = pageWidth - targetWdith - offsetLeft
下边框 = pageHeight - targetHeight - offsetTop
左边框 = offssetLeft
6 针对于浏览器的resize事件，同步实现遮罩边框的改变
源码如下：
/*过渡效果*/transition:all .25s;
/*边缘闪动问题fix*/box-shadow:0 0 0 100px #000;overflow:hidden;
}.cover::before{content:'';width:100%;height:100%;border-radius:50%;border:400px solid #000;position:absolute;left:-400px;top:-400px;box-shadow:inset 0 0 5px 2px rgba(0,0,0,.5);
}
/*IE7, IE8 img*/.cover > img{width:100%;height:100%;
}a{display:block;width:100px;height:50px;line-height:50px;font-size:12px;}#add{height:50px;line-height:50px;margin-top:10px;background:#fff;}#aa{width:150px;height:50px;line-height:50px;margin-top:10px;}span{display:inline-block;}
