对不规则形状设置阴影filter: drop-shadow的使用

filter: drop-shadow() 是 CSS 中的一种高级阴影效果，与 box-shadow 类似，但有更灵活的应用场景。它主要用于为元素（尤其是图像或透明背景元素）添加阴影效果，并能跟随元素的轮廓形状，而不仅限于矩形边框。

filter: drop-shadow(offset-x offset-y blur-radius color);

• offset-x：阴影的水平偏移量（正值向右，负值向左）。
• offset-y：阴影的垂直偏移量（正值向下，负值向上）。
• blur-radius：模糊半径（可选，默认值为 0，值越大越模糊）。
• color：阴影颜色（可选，默认是元素的文本颜色）。

例如三角形有阴影轮廓就可以用，box-shadow就不能应用在三角形这种不规则的图形当中

.circulationBox::before {
  width: 0;
  height: 0;
  border-top: 10px solid #fff;
  border-right: 10px solid transparent;
  position: absolute;
  top: 0;
  right: -10px;
  content: '';
  filter: drop-shadow(1px 0px 1px rgba(202,202,202,0.5));
}

如图所示

filter: drop-shadow.png