用css实现一个Popover弹出框，你不知道的drop-shadow效果

在做移动端项目的时候，我们有时候会碰到这种效果，但是在我常用的移动端UI框架vant中却没有，并且也不想因此引入一个第三方库来增加代码体积，于是决定动手写一个，主要用到的属性是drop-shadow()，真的很简单很简单，下面我们开写。

语法：drop-shadow(offset-x offset-y blur-radius spread-radius color)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .box {
        background-color: #fff;
        position: relative;
        width: 125px;
        height: 204px;
        margin: 50px;
        filter: drop-shadow(0px 2px 8px rgba(198, 198, 198, 0.5));
        /* box-shadow: 0px 2px 8px 0px rgba(198, 198, 198, 0.5); */
      }

      .box::after {
        content: "";
        position: absolute;
        top: -40px;
        left: calc(50% - 20px);
        width: 0;
        height: 0;
        border: 20px solid transparent;
        border-bottom-color: #fff;
      }
      
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

效果

需要注意的是，虽然文档上写drop-shadow()和box-shadow的使用方式一模一样,但是在实际浏览器中,却发现对spread-radius属性并不支持,官网文档也有说明。