如何在不使用JS的情况下在div中心挖一个洞

前一段时间，我在论坛上看见一个2015年的帖子，说如何利用css在div中间挖一个洞。这个渐变大家想必都有很多方法办到，但是这个洞就疑惑了。求助的兄弟如图。

恰巧我面试的一家要招45k的前端工程师也出了一个这个问题。这家公司出了很多题，不像别的公司一问就是各种js的问题，各种架构，框架……

但是我脑子想了一段时间，觉得canvase就可以完美解决，但是只让使用css所以我就有些疑惑了。

这就类似于一个扫码的手机功能，周围半透明遮罩相机画面，中间全透明部分显示扫描的二维码。

所以我想到了这个方法，border！

在定义border颜色的时候，我们可以为他加一个border:200px solid rgba(0,0,0,0.7);

这样就有了类似微信的那种效果。

如果想要那种渐变的可以使用背景图或者css3渐变来实现