1. 前言
在 CSS 样式中，阴影不仅可以为盒子等元素增加立体感，还可以作为一种很好的分割线来使用。然而，CSS 对于阴影的属性有不少，比如 text-shadow 、box-shadow 和 -webkit-box-shadow 等，其中后面两个的名称非常相似，很容易让人混淆。本文主要介绍 -webkit-box-shadow 和 box-shadow 之间的区别。
2. -webkit-box-shadow
-webkit-box-shadow 是 Safari 和 Chrome 浏览器专有的属性，它用于在元素周围添加阴影效果。它的语法如下：
-webkit-box-shadow: h-shadow v-shadow blur spread color inset;
其中，h-shadow 和 v-shadow 分别表示阴影横向和纵向的距离，它们可以为负数、零或正数。参数 blur 代表阴影模糊的大小，参数 spread 代表阴影扩散的大小。颜色属性指定阴影的颜色，而 inset 值则将阴影设置为内部投影。下面是一个简单的例子：
div {
-webkit-box-shadow: 5px 5px 5px #888;
}
以上代码表示一个宽高为 100px 的 div 元素在右下角添加了一个 5px 的偏移阴影，并且阴影模糊度为 5px，颜色为 #888。
2.1 -webkit-box-shadow 的问题
由于 -webkit-box-shadow 是 Safari 和 Chrome 浏览器独有的属性，所以在其他浏览器中可能无法正常运行。为了解决这个问题，我们需要使用 box-shadow 属性。
3. box-shadow
box-shadow 属性可以为元素添加阴影效果，它是 CSS3 标准中的属性，除了 Safari 和 Chrome 之外，其他浏览器都支持该属性。它的语法如下：
box-shadow: h-shadow v-shadow blur spread color inset;
参数的含义与 -webkit-box-shadow 一样。下面是一个简单的例子：
div {
box-shadow: 5px 5px 5px #888;
}
以上代码与 -webkit-box-shadow 的例子效果是一样的，但是可以在所有的浏览器中正常运行。
3.1 box-shadow 与 -webkit-box-shadow 的区别
虽然两者的使用方法几乎相同，但是在实际开发中，它们还是有着一些不同点的。
3.1.1 浏览器支持度
如前所述，-webkit-box-shadow 属性只有 Safari 和 Chrome 浏览器支持，而 box-shadow 属性则可以在绝大多数主流浏览器上运行。
3.1.2 父元素宽高度的计算
box-shadow 属性会将元素的宽高度包括在内，而 -webkit-box-shadow 则不会。下面是一个例子：
div {
box-shadow: 5px 5px 5px #888;
width: 100px;
height: 100px;
}
div.parent {
width: 200px;
height: 200px;
}
以上代码指定了一个宽高为 100px 的 div 元素，在其中添加了一个 5px 的阴影。当我们把该 div 放入一个宽高为 200px 的父元素 div 中时，父元素的宽高度将会被计算为 110px。而对于 -webkit-box-shadow 属性，则不会发生这种情况。
3.1.3 属性顺序问题
在使用属性时，其顺序也是需要注意的。对于 -webkit-box-shadow 属性，我们可以随意调整属性的顺序，例如下面这个例子：
div {
-webkit-box-shadow: 5px 5px 5px #888 inset;
}
而对于 box-shadow 属性，则需要把 inset 参数放在颜色属性之前，否则会被解释为一个无效值。下面是一个例子：
div {
box-shadow: 5px 5px 5px inset #888;
}
需要注意的是，另一种常见的写法是将不同的参数分开写，这种写法的顺序是没有要求的。例如：
div {
box-shadow:
5px 5px 5px #888,
10px 10px 10px #ccc inset;
}
以上代码表示添加了两个阴影效果，一个灰色 5px 的偏移阴影，一个白色 10px 的内投影阴影。这种写法在排版不太规整的情况下，比较直观，也能够方便地进行调整。
4. 总结
虽然 -webkit-box-shadow 和 box-shadow 属性都可以添加阴影效果，但是由于兼容性、父元素宽高度计算和属性顺序等不同点，我们更建议使用 box-shadow 属性来添加阴影效果。在实际开发中，我们可以根据需要选择合适的参数来制作出需要的效果，同时也需要注意属性值的顺序问题。