你未必知道的CSS阴影

你未必知道的CSS阴影

假设我们有这样的需求,给图片或元素周围设置阴影效果那么大家一定会联想到 box-shadow 属性,但其实 实现的效果是不对的
1.png
可以看到左边是需求效果,而右边使用了 box-shadow 后,效果并不是我们想要的那样

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

核心代码: 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>
评论区
头像