超赞的 CSS 阴影技巧与细节

本文的题目是 CSS 阴影技巧与细节。CSS 阴影，却不一定是 box-shadow 与 filter:drop-shadow，为啥？因为使用其他属性也可以模拟阴影，而且是各种各样的阴影。下面且听我娓娓道来~

单侧投影

先说单侧投影，关于 box-shadow，大部分时候，我们使用它都是用来生成一个两侧的投影，或者一个四侧的投影。如下：

OK，那如果要生成一个单侧的投影呢？

我们来看看 box-shadow 的用法定义：

{
    box-shadow: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
}
web前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯

以 box-shadow: 1px 2px 3px 4px #333 为例，4 个数值的含义分别是，x 方向偏移值、y 方向偏移值 、模糊半径、扩张半径。

这里有一个小技巧，扩张半径可以为负值。

继续，如果阴影的模糊半径，与负的扩张半径一致，那么我们将看不到任何阴影，因为生成的阴影将被包含在原来的元素之下，除非给它设定一个方向的偏移量。所以这个时候，我们给定一个方向的偏移值，即可实现单侧投影：

投影背景 / 背景动画

接着上面的说。

很明显，0 = -0，所以当 box-shadow 的模糊半径和扩张半径都为 0 的时候，我们也可以得到一个和元素大小一样的阴影，只不过被元素本身遮挡住了，我们尝试将其偏移出来。

CSS代码如下：

div {
    width: 80px;
    height: 80px;
    border: 1px solid #333;
    box-sizing: border-box;
    box-shadow: 80px 80px 0 0 #000;
}

得到如下结果：

有什么用呢？好像没什么意义啊。

额，确实好像没什么用。不过我们注意到，box-shadow 是可以设置多层的，也就是多层阴影，而且可以进行过渡变换动画（补间动画）。但是 background-image: linear-gradient()，也就是渐变背景是不能进行补间动画的。

这又扯到哪里去了。好我们回来，利用上面的特性，我们可以利用 box-shadow 实现原本只能利用渐变才能实现的背景图：

用 box-shadow，实现它的 CSS 代码如下（可以更简化）：

.shadow {
    position: relative;
    width: 250px;
    height: 250px;
}

.shadow::before {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    top: -50px;
    left: -50px;
    box-shadow: 
        50px 50px #000, 150px 50px #000, 250px 50px #000,
        50px 100px #000, 150px 100px #000, 250px 100px #000,
        50px 150px #000, 150px 150px #000, 250px 150px #000,
        50px 200px #000, 150px 200px #000, 250px 200px #000,
        50px 250px #000, 150px 250px #000, 250px 250px #000;
}

用渐变来实现的话，只需要这样：

.gradient {
    width: 250px;
    height: 250px;
    background-image: linear-gradient(90deg, #000 0%, #000 50%, #fff 50%, #fff 100%);
    background-size:  100px 100px;
}

为什么选择更为复杂的 box-shadow 呢？因为它可以进行补间动画，像这样，这是使用渐变做不到的：