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

正如我们已经知道的，CSS为我们提供了广泛的属性和伪类，使开发人员能够为元素添加所需的样式。其中之一就是盒阴影属性；它允许我们在元素周围添加阴影效果。

盒阴影属性

盒阴影是一种CSS属性，用于在元素上创建外部或内部的阴影效果。它将一个或多个阴影应用于元素，每个阴影都由元素的X和Y偏移，模糊半径，扩展半径，颜色和不透明度值指定。

盒阴影属性可以接受用逗号分隔的多个值；每个值定义一个单独的阴影效果。如果没有任何偏移量应用于盒阴影，它会使它看起来像是平面形状，就像在纸上打印一样。

假设我们要为应用了盒阴影的元素指定一些边界半径，那么盒阴影的效果也会像元素一样有一个弧形边界。多个盒阴影的z轴排序与多个文本阴影的排序相同。

我们可以使用以下方式为元素指定盒阴影：

两个值 - 当我们使用具有两个值的盒阴影属性时，它们将用作X和Y偏移的值。
三个值 - 前两个值作为X和Y偏移的值，而第三个值用于模糊半径效果。
四个值 - 第四个值作为扩展半径的值，而其余的值分别是X偏移，Y偏移和模糊半径的值。
内凹 - 这是一个可选值，其存在使得边框的阴影向一侧。如果不指定这个值，阴影似乎会抬高，如投影。
颜色 - 这是另一个可选值，它设置阴影的颜色。如果未指定，颜色默认为元素的当前颜色。

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

示例

下面是在CSS中使用盒阴影属性的示例。

<!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或苹果的Safari这样的浏览器的。

可以给此属性赋予的可能值包括：

X偏移 - 它指定元素的水平偏移或距离。
Y偏移 - 这也指定了偏移或距离，但是是在垂直方向上。
模糊 - 它是一个长度值，如果是一个较大的值，创建的模糊效果也会很大，阴影效果就会变大，反之亦然。

示例

下面是在CSS中使用webkit-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属性通常被实现，而”webkit-box-shadow”只在使用特定浏览器引擎（即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语法进行了替换，因为大多数现代浏览器都支持它。总之，这两个属性都用于为元素创建阴影，但随着时间的推移，只能使用其中一个，另一个将被弃用。