解决思路：一、移除默认颜色(去色操作)；二、利用CSS3滤镜filter中的属性drop-shadow。
要使用标准的 css3 实现某元素的投影效果，有两个方法，第一个就是使用常见的 box-shadow ，第二个就是使用 css3 的 filter 阴影滤镜 drop-shadow。
所以：
通通不行，实现遇到了巨大的阻碍。
后来想，如果我实体部分也在可视区域内，但是是透明的，会怎样呢（反正不会有投影出来）
于是，就尝试了经常带来意外惊喜的透明边框，结果是可喜的
因此，下面这一个 css 声明式千万不能少的：
关于兼容性
IE13+ 支持，Chrome 和 FireFox 浏览器支持，移动端 ios 支持，Android 4.4+ 支持。也就是，基本上，移动端现在可以使用这种技术了。
另：
svg透明度变成黑色原因是：这个机制是依赖css3的currentColor的,如不写fill-rule:currentColor的话,svg是没法自动继承颜色的,只有一个默认的黑色。在项目中经常会用到svg图标，伴随着 hover 效果这样的需求，百度上一大堆人都在说修改 fill 属性就能实现，但结果都是毫无效果。来看看我是怎么修改的。本教程含如何在vue中引入svg和修改svg颜色，如果想直接看如何修改svg颜色请看最下边。
然后在mian.js 注册
svg 颜色绘制通常都是用 fill 来实现。
看上边的 fill 属性是个 none ，这样修改是方便咱们前端后期通过 color 来修改。注意哦，这个只适用于单色svg图标。后边的 fill 属性 都 要修改为 fill=currentColor 。一定是都要才会有效果哦！
svg颜色才会随着css color 一起修改哦
