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