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

在本文中，我们将介绍 CSS 中 -webkit-box-shadow 和 box-shadow 的区别，并提供示例说明。

阅读更多：CSS 教程

-webkit-box-shadow

-webkit-box-shadow 是用来设置元素的阴影效果的 CSS 属性，仅适用于某些使用 WebKit 内核的浏览器，如 Safari 和 Chrome。

-webkit-box-shadow 属性接受一个或多个阴影值，每个阴影值由以下几个部分组成：
– inset：可选参数，表示阴影的内部还是外部，默认为外部。例如，inset 为 inset，则表示阴影是元素内部的阴影。
– offsetX：可选参数，表示阴影的水平偏移量，默认为 0。例如，offsetX 为 5px，则表示阴影在元素右边 5 像素处。
– offsetY：可选参数，表示阴影的垂直偏移量，默认为 0。例如，offsetY 为 -3px，则表示阴影在元素上方 3 像素处。
– blurRadius：可选参数，表示阴影的模糊半径，默认为 0。例如，blurRadius 为 10px，则表示阴影有 10 像素的模糊效果。
– spreadRadius：可选参数，表示阴影的扩散半径，默认为 0。例如，spreadRadius 为 2px，则表示阴影在水平和垂直方向上扩展了 2 像素。
– color：可选参数，表示阴影的颜色，默认为黑色。例如，color 为 gray，则表示阴影为灰色。

示例代码如下所示：

-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);

box-shadow

box-shadow 是用来设置元素的阴影效果的 CSS 属性，适用于大多数现代浏览器。

box-shadow 属性的用法和 -webkit-box-shadow 类似，同样接受阴影值的各个参数。示例代码如下所示：

box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);

区别对比

-webkit-box-shadow 和 box-shadow 的区别主要在于前者只适用于使用了 WebKit 内核的浏览器，而后者适用于大多数现代浏览器。

在使用 -webkit-box-shadow 属性时，需要使用 -webkit- 前缀来支持 WebKit 内核的浏览器，示例代码如下所示：

div {
  -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

而在使用 box-shadow 属性时，不需要添加任何前缀，示例代码如下所示：

div {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

总结

本文介绍了 CSS 中 -webkit-box-shadow 和 box-shadow 的区别。-webkit-box-shadow 是适用于 WebKit 内核的浏览器的属性，而 box-shadow 是适用于大多数现代浏览器的属性。使用 -webkit-box-shadow 时需要添加 -webkit- 前缀，而使用 box-shadow 时不需要添加任何前缀。希望本文可以对你理解和使用 CSS 中的阴影效果有所帮助。