CSS 中 -webkit-box-shadow 和 box-shadow 的区别

在 CSS 中，我们可以利用 box-shadow 属性添加元素的阴影效果。而 -webkit-box-shadow 属性，通常可以在老版本的 Safari 和 Chrome 浏览器中使用。这两个属性看起来很相似，但实际上有一些重要的区别。

-webkit-box-shadow

-webkit-box-shadow 属性是为了在早期的 Safari 和 Chrome 浏览器中支持 box-shadow 创建的前缀。通过使用这个属性，你可以通过添加像这样的 CSS 样式来创建一个盒子阴影：

.element {
  -webkit-box-shadow: 10px 10px 5px #888;
}

在这个样式中，我们传递了 4 个值，分别代表了阴影的水平偏移、垂直偏移、模糊程度和颜色。这个阴影效果会将元素的下方和右侧添加一个 10 像素宽的阴影。

需要注意的是，-webkit-box-shadow 只在老版本的 Safari 和 Chrome 浏览器中存在。使用它可能会导致其他现代浏览器不支持。

box-shadow

box-shadow 属性是标准的 CSS 样式，并且在所有现代的浏览器中都得到了很好的支持。如果你想要将阴影效果应用到网页上，最好的办法是使用这个属性。

无需添加任何前缀，让我们来看一下 box-shadow 属性如何工作：

.element {
  box-shadow: 10px 10px 5px #888;
}

在这个样式中，我们传递了同样的 4 个值，并且做出同样的阴影效果。但是，这次我们不需要添加 -webkit- 前缀。

总结

-webkit-box-shadow 属性是一种在一些早期的浏览器中添加盒子阴影效果的方法，而 box-shadow 属性是标准的 CSS 属性，并在所有现代浏览器中得到了很好的支持。在编写新网站的时候，最好使用 box-shadow 属性以确保您的代码能够在各种现代浏览器中正常工作。