CSS中box-shadow属性

这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战

box-shadow

box-shadow表示盒阴影，可以给元素设置阴影效果，如果我们设置向下的阴影效果:

.wrapper {
    position: fixed;
    left: 0;
    top: 0,
    bottom: 0,
    right: 0,
    background-color: red;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .3)
}

以上box-shadow中的0表示水平偏移，3px表示垂直偏移，5px表示模糊大小，rgba(0, 0, 0, .3)表示投影的颜色。

常用的投影效果主要由偏移、模糊、颜色组成。

无论是投影效果还是盒阴影，光源都默认在左上角，所以水平偏移如果是整数则表示投影偏右，如果是负数则表示投影偏左，同理垂直偏移也是一样。

内阴影

box-shadow中支持inset关键字，表示阴影向元素内部。

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    box-shadow:inset 3px 3px 5px rgba(0, 0, 0, .6);
}
.box1 {
    width: 100px;
    height: 100px;
    background-color: blue;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, .6);
}

box-shadow: 内阴影效果适合实现内嵌效果，表现更低一层的视觉效果。

bobx-shadow：内阴影的水平和垂直偏移方向和外阴影一致，都是左上角光源。

颜色覆盖

box-shadow可以生成的阴影位于文字内容下面，背景颜色的上面，所以我们就可以实现让元素上面覆盖一层颜色。

box-shadow内阴影颜色覆盖是有局限的，对img这样的标签元素时无效的。

容易忽略的地方

box-shadow可以接收2-4个值，前两个值是固定的，分别表示水平偏移和垂直偏移，第三个值表示模糊半径，第四个值表示扩展半径，第四个值日常中很少用到，主要用于两个方面：轮廓模拟和单侧阴影。

轮廓模拟我们可以借助第四个长度值来实现：

.warpper {
    background-color: blue;
    // 轮廓模拟
    box-shadow: inset 0 0 2px #BF56FC;
}

单侧阴影可以用扩展半径来实现，因为扩展半径支持负值，当我们给模糊半径设置的比较大，就可以看到左右两侧有部分阴影了。

.warpper {
    width: 160px;
    padding: 15px;
    background-color: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .4);
}

box-shadow还可以实现多边框效果，而且也支持圆角效果。我们只需要多设置几个进行叠加就可以实现。

如果想用box-shadow实现多种css加载效果，我们可以与keyframes结合，这样动画效果也有。

box-shadow还可以用于动画与性能的优化，例如我们实现一个盒子阴影的过渡效果:

.wrapper {
    transition: all .4s;
    box-shadow: 0 7px 11px rgba(0, 0, 0, 0.4);
}

.wrapper:hover {
    box-shadow: 0 15px 23px rgba(0, 0, 0, 0.8)
}