box-shadow详解

box-shadow 直译被称为“盒子阴影”，直译的结果与大家们的认知是相符的。CSS 中存在盒模型,针对于盒模型的阴影呗。这点大家要记住，是针对于盒子（元素） 的阴影，后面我们还会着重说明。
box-shadow 属性值由 6 部分组成。

语法:

box-shadow: offset-x offset-y blur spread color position;

这里的 position 可以写在最前面。也可以像上面一样写在最后面。

1. offset-x offset-y

offset-x用于声明阴影的水平偏移，就是阴影在 X 轴上的位置。

当值为正数， 阴影就位于元素右侧，

若值为负数，阴影位于元素的左侧。

同理

offset-y 用于声明阴影的垂直偏移，就是阴影在 Y 轴上的位置。

当值为正数， 阴影就位于元素下侧，

若值为负数，阴影位于元素的上侧。

 .box-shadow{
      width: 100px;
      height: 100px;
      background: #3d63c8;
      box-shadow: 10px 10px;
    }

效果如下

image.png

通过这个我们能看出来是具有阴影的，根据上面的讲解能看出来是（10px 10px）向下向右偏移 10 个 px，同理负值是向上向左偏移。接下来我们看 blur

2. blur

blur 表示阴影的模糊半径。效果与设计软件中使用的高斯模糊滤镜一样。

值为 0 意味着阴影完全不模糊。

blur 值越大，边角越不锋利，阴影越朦胧。

不允许负值，负值等同于 0。
在我们上面的例子中修改：

CSS:

.box-shadow{
      width: 100px;
      height: 100px;
      background: #3d63c8;
      box-shadow: 10px 10px 10px; 
    }

结果

image.png

我们能看到阴影虚化了。

这里要注意的是：W3C 中没有规定浏览器厂商使用哪种方式实现模糊效果， 反正效果与高斯模糊效果差不多就是了。但有一点我们需要注意的，那就是 模糊效果会扩大阴影的面积。

3. spread

spread 表示阴影的大小。

当值为正数，阴影会向四周扩展。

若值为负数， 阴影会收缩，小于元素尺寸。

默认值 0会保持阴影和元素尺寸一致。

 .box-shadow{
      width: 100px;
      height: 100px;
      background: #3d63c8;
      box-shadow: 10px 10px 10px 10px; 
    }

image.png

在这里面我们能看到，当我们 spread 为 10px， margin 也为 10px 他俩是重合的。

说明 spread 为正值，在原来的大小上（上下左右） + spread 的值。 当 spread 为为负值，再远的大小上 – spread 的值

4. color

color 表示阴影的颜色。

可以是任何颜色单位。

这个没什么说的。

5. position

position 表示阴影的位置，可选项。

默认为外部阴影。可以通过使用 inset 关键字来制作内部阴影。