CSS的box-shadow

@CSS

理解 box-shadow

使用阴影复制图像/投影图像
当 box-shadow 的第三、第四个参数模糊半径和扩张半径都为 0 的时候，我们可以得到一个和元素大小一样的阴影：
div {
width: 80px;
height: 80px;
border: 1px solid #333;
box-sizing: border-box;
box-shadow: 80px 80px 0 0 #000;
}
阴影可以是多重的
第二个技巧则是，box-shadow 是允许多重阴影的，并且他们的坐标是可以完全掌控的。
是的，我们可以像下面这样给一个元素定义多重阴影，并且利用阴影的第一、第二个参数控制它相对于元素的坐标：
div {
width: 80px;
height: 80px;
border: 1px solid #333;
box-sizing: border-box;
box-shadow:
80px 80px 0 0 #000,
70px 70px 0 0 #000,
…
60px 60px 0 0 #000;
}
在阴影坐标中运用三角函数
想法不错，但是 CSS 本身并没有提供三角函数。这里，我们需要借助 Sass 来在 CSS 中实现简单的三角函数。
还好，已经有前人帮忙把这个工作做完了：
简单而言，就是借助三角函数的泰勒展开式，使用 Sass 函数模拟实现三角函数的 sin()、cos()、tan()：
由于展开式是无限长的，使用 Sass 函数模拟时，不可能得到一个非常精确的值，但是在日常作图下已经完全够用了，以下是使用 Sass 函数模拟实现三角函数的 sin()、cos()、tan()
由于上面最终计算 sin、cos 泰勒展开的时候，只使用了 20 层循环，所以当传入的值太大的时候，则会产生较大误差。经测试，传入数值在 [-20, 20] 以内，精度还是非常高的。

而以 sin 函数为例，x 取值在 [-π, π] 之间，已经能覆盖所有 sin(x) 的取值范围，所以 [-20, 20] 这个范围是完全够用的，我们只需要尽量让传入的 x 值落在这个区域范围内即不会产生太大误差。
好，铺垫了那么多，接下来使用上述的 sin 函数试一下，假设我们有这样一个结构
div {
width: 1px;
height: 1px;
background: #000;
border-radius: 50%;
}
我们再借助 Sass 实现一个 50 层的循环，当然其中阴影的 x 坐标使用了 sin 函数
@function shadowSet($vx, $vy) {
$shadow : 0 0 0 0 #000;

@for $i from 0 through 50 {
    $x: sin($i / 8) * $vx;
    $y: $i * $vy;
     
    $shadow: $shadow, #{$x} #{$y} 0 0 rgba(0, 0, 0, 1);
}
 
@return $shadow;

}

div {
width: 1px;
height: 1px;
background: #000;
border-radius: 50%;
box-shadow: shadowSet(4px, 1px);
}