你未必知道的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; ...