利用边框阴影,制作穿透圆孔上面效果在很多移动端的使用教程中经常可以看到。利用box-shadow阴影把元素包裹起来，然

上面效果在很多移动端的使用教程中经常可以看到。

现在说一下如何利用CSS来实现

box-shadow

思路:

利用box-shadow阴影把元素包裹起来，然后把阴影扩大到视图之外。

步骤1：画出圆并加上阴影。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>穿透圆孔</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    /* 利用边框阴影 制作穿透圆孔 */
    .box_shadow {
      position: absolute;
      top: calc(50% - 50px);
      left: calc(50% - 50px);
      height: 100px;
      width: 100px;
      box-shadow: 0 0 50px 10px rgba(0, 0, 0, .7);
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div class="box_shadow">
  </div>
</body>
</html>

步骤2：把阴影扩大出视图,这里写死100vh，实际情况可以通过获取屏幕大小来调节。

box-shadow: 0 0 50px 100vh rgba(0, 0, 0, .7);

步骤3：添加内容并调节圆的位置。

注意

因为阴影是可以穿透的，所以可以点击内容

比如：这里的‘链接’是可以点击的

处理方法：

使用:before 和 :after 伪元素建一个透明的层来遮挡。

.box_shadow::before {
  content: '';
  display: block;
  width: 9999px;
  height: 9999px;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}