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

我们已经知道，CSS为我们提供了大量的属性和伪类，这使得开发者可以为元素添加所需的样式。其中一个属性是盒影属性，它允许我们在元素周围添加类似阴影的效果。

盒状阴影属性

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

box-shadow属性可以接受多个由逗号分隔的值；每个值定义一个单一的阴影效果。一个没有任何偏移的盒状阴影应用将使它看起来像一个平面形状，就像它被印在纸上。

假设，我们应用箱形阴影的元素在它身上指定了某种形式的边界半径，那么箱形阴影的效果也会像该元素一样有一个弯曲的边界。多个盒状阴影在Z轴上的排序与多个文本阴影的排序是一样的。

我们可以用以下方法为一个元素指定一个盒状阴影

两个值– 每当我们使用box-shadow属性的两个值时，它们将被用作X和Y的偏移值。
三个值– 前两个值作为X和Y偏移的值，而第三个值是用于模糊半径效果。
四个值– 第四个值被当作扩散半径的值，而其余的值分别是X偏移、Y偏移和模糊半径的值。
嵌入 – 这是一个可选的值，它的存在使画面的阴影向一侧倾斜。如果我们不指定这一点，阴影似乎会被抬高，就像水滴阴影一样。
颜色 – 这是另一个可选的值，用于设置阴影的颜色。如果不指定，颜色默认为该元素的当前颜色。

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

例子

下面是一个在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>

现在我们知道了盒影属性，我们将研究什么是CSS中的 “webkit”，以及为什么我们需要它。之后，我们将讨论webkit盒式阴影。

什么是webkit

Webkit是苹果公司的网络浏览器引擎_ ，几乎所有的macOS应用都使用了它。还有很多其他的网络浏览器引擎，例如火狐的Gecko，边缘的Blink等等。那么，问题来了，为什么我们需要它们呢？

CSS选择器上的-webkit前缀表示仅由该引擎处理的属性，类似于-moz属性。通过指定这个前缀，我们基本上是在告诉浏览器，只有在使用特定的浏览器引擎时才使用这个前缀，否则就保持原样。使用起来相当麻烦；这就是为什么许多开发者都希望尽快停止使用。

CSS中的Webkit-box-shadow属性

和box-shadow属性一样， webkit-box-shadow属性也是为被应用的元素的框架添加类似阴影的效果。但需要注意的是，它的实现是特定于Chrome或苹果的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的区别

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

盒状阴影属性是普遍实现的，而另一方面，’webkitbox-shadow’只在使用特定网络浏览器引擎的浏览器上工作，即Safari或Google Chrome。
盒状阴影属性使我们可以在所有最新的版本中设计阴影效果，但如果我们必须在旧版本的浏览器上工作，我们必须使用webkit-box-shadow。

结论

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