你未必知道的CSS阴影

假设我们有这样的需求，给图片或元素周围设置阴影效果那么大家一定会联想到 box-shadow 属性，但其实实现的效果是不对的

可以看到左边是需求效果，而右边使用了 box-shadow 后，效果并不是我们想要的那样

解决这个问题的方法非常简单，可以通过 filter: frop-shadow 来设置阴影，
这个属性能够根据周围的像素点来设置阴影，
而 box-shadow 会给整个盒子设置阴影

核心代码： filter: drop-shadow(0px 0px 10px rgba(255, 0, 0, 1));

完整代码：

<script setup lang="ts"></script><template><div class="container"><img src="../../public/avatar.png" alt="" class="avatar"><div class="box"></div></div>
</template><style scoped lang="scss">
.container {display: flex;justify-content: space-between;width: 550px;
}.avatar {width: 200px;height: 200px;// box-shadow: 0px 0px 10px rgba(255, 0, 0, 1);// 核心代码filter: drop-shadow(0px 0px 10px rgba(255, 0, 0, 1));
}.box {position: relative;width: 200px;height: 200px;background-color: burlywood;// box-shadow: 0px 0px 10px rgba(255, 0, 0, 1);// 核心代码filter: drop-shadow(0px 0px 10px rgba(255, 0, 0, 1));&::after {content: "";position: absolute;width: 0;height: 0;border-top: 60px solid burlywood;border-right: 60px solid transparent;top: 35%;left: -14%;transform: rotate(-45deg);}
}
</style>