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

cssweb developmentfront end technology更新于 2025/2/8 3:24:17

众所周知，CSS 提供了丰富的属性和伪类，方便开发者为元素添加所需的样式。box-shadow 属性 就是其中之一;它允许我们在元素周围添加类似阴影的效果。

box-shadow 属性

box-shadow 是一个 CSS 属性，用于在元素上创建外阴影或内阴影效果。它会为元素应用一个或多个阴影，每个阴影都指定了相对于元素的 X 和 Y 轴偏移量、模糊半径、扩展半径、颜色和不透明度值。

box-shadow 属性可以接受多个以逗号分隔的值;每个值定义一个阴影效果。如果应用了不带偏移量的 box-shadow，元素会看起来像打印在纸上的平面形状。

假设我们应用 box-shadow 的元素指定了某种形式的 borderradius，那么 box-shadow 的效果也会像元素一样具有弯曲的边框。多个 box-shadow 在 z 轴上的顺序与多个文本阴影的顺序相同。

我们可以使用以下方式为元素指定 box-shadow:-

两个值 - 每当我们使用带有两个值的 box-shadow 属性时，它们将用作 X 和 Y 偏移的值。
三个值 - 前两个值用作 X 和 Y 偏移的值，第三个值用于模糊半径效果。
四个值 - 第四个值被视为扩展半径的值，其余值分别用作 X 偏移、Y 偏移和模糊半径的值。
插入 - 它是一个可选值，它的存在会使框架的阴影偏向一侧。如果我们不指定此项，阴影看起来会像投影一样向上凸起。
Color − 另一个可选值，用于设置阴影的颜色。如果未指定，则颜色默认为元素的当前颜色。

其初始值为 None，适用于所有元素。它可以用阴影列表的动画类型进行动画处理，但不可继承。

示例

下面给出了一个在 CSS 中使用 box-shadow 属性的示例。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Box Shadow</title>
   <style>
      blockquote {
         padding: 20px;
         box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1), 0 0 0 2px rgb(255, 255, 255), 0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
      }
   </style>
</head>
<body>
   <blockquote>
      <q>
         This is an example of box shadow effect on elements <br />
         Another temporary line for extra text
      </q>
      <p>— Example of Box Shadow</p>
   </blockquote>
</body>
</html>

现在我们了解了 box-shadow 属性，我们将研究 CSS 中的"webkit"是什么以及为什么我们需要它。之后，我们将讨论 webkit 的 box-shadow。

什么是 webkit?

Webkit 是Apple 的 Web 浏览器引擎，几乎所有 macOS 应用都使用它。还有很多其他的 Web 浏览器引擎，例如 Firefox 的 Gecko、Edge 的 Blink 等等。那么，问题来了，我们为什么需要它们呢?

CSS 选择器上的 -webkit 前缀表示仅供此引擎处理的属性，类似于 -moz 属性。通过指定此属性，我们基本上是在告诉浏览器仅在使用特定浏览器引擎时使用它，否则保持不变。使用起来相当麻烦;这就是为什么许多开发者希望这项功能尽快停止使用。

CSS 中的 Webkit-box-shadow 属性

与 box-shadow 属性类似，webkit-box-shadow 属性 也会为应用该属性的元素的框架添加类似阴影的效果。但需要注意的是，它的实现特定于 Chrome 或 Apple Safari 等浏览器。

此属性可能的值包括:-

X-offset - 指定元素的水平偏移量或距离。
Y-offset - 也指定垂直方向的偏移量或距离。
Blur - 它是一个长度值，如果值较大，创建的模糊效果也会较大，因此阴影效果也会较大，反之亦然。

示例

下面给出了一个在 CSS 中使用 Web Kit-box-shadow 的示例。

<!DOCTYPE html>
<html>
<head>
   <style>
      .BoxShadow {
         color: blue;
         border: solid 1px blue;
         margin: 1.5rem 3rem;
         -webkit-box-shadow: 5px 10px 18px red;
      }
   </style>
</head>
<body>
   <div class="BoxShadow">
      <h1>Sample text</h1>
      <p>Some more random text</p>
   </div>
</body>
</html>

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

现在我们了解了这两个属性，让我们列出它们之间的区别。

box-shadow 属性通常实现，而 webkitbox-shadow 属性仅适用于使用特定 Web 浏览器引擎的浏览器，例如 Safari 或 Google Chrome。
box-shadow 属性使我们能够在所有最新版本的浏览器中设置阴影效果，但如果我们必须在旧版本的浏览器中工作，则必须使用 webkit-box-shadow。

结论

总而言之，CSS 中 -webkit-box-shadow 和 box-shadow 的主要区别在于 -webkit-box-shadow 是 Webkit 浏览器引入的 box-shadow 属性的供应商前缀。 Box Shadow 属性允许您在不使用图片或其他外部资源的情况下为元素应用阴影效果。-webkit-box-shadow 属性已被弃用，并被标准 box-shadow 语法取代。因为大多数现代浏览器都支持该属性。总而言之，这两个属性都用于在元素上创建阴影，但只能使用其中一个，因为另一个属性将随着时间的推移而被弃用。