CSS 实现不规则元素的阴影

大伙在工作中，尤其写页面样式，相信很多地方用到 box-shadow 阴影属性，但是这个属性只能用到规则的元素上，亦或者说只能用到一个元素上，那当我们遇到不规则的元素时，想加阴影就比较棘手了，但是，CSS 提供了此问题的解决方案，今天，我们具体介绍下：

我们如果想实现这个图形，第一想到的，就是先绘制一个方块，然后用伪元素或者子元素绘制小方块，代码如下：

<div class="box">我是一个不规则的盒子</div>

.box {
    
    
   width: 200px;
   height: 200px;
   background-color: deeppink;
   border-radius: 20px;
   position: relative;
   margin: 200px 200px;
   display: flex;
   justify-content: center;
   align-items: center;
   color: #fff;
   font-size: 16px;
 }
 .box:before {
    
    
   content: '';
   position: absolute;
   left: 50%;
   top: -4.5px;
   transform: rotateZ(45deg) translate(-50%);
   width: 30px;
   height: 30px;
   border-radius: 2px;
   background-color: deeppink;
 }

这时候，如果我们想加阴影的话，通常做法先给盒子加阴影，再给子元素加阴影：

.box {
    
    
	box-shadow: 0 0 10px 2px yellow;
}
.box:before {
    
    
	box-shadow: 0 0 10px 2px yellow;
}

我们看下效果，发现没有实现我们想要的效果

！！！这个时候我们利用一个样式：filter(drop-shadow)：

.box {
    
    
	filter: drop-shadow(0 0 10px yellow);
}