你未必知道的CSS阴影

你未必知道的CSS阴影

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

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

解决这个问题的方法非常简单，可以通过 filter: frop-shadow 来设置阴影，

这个属性能够根据周围的像素点来设置阴影，

而 box-shadow 会给整个盒子设置阴影

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

完整代码：

                .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);    }}