CSS 中 -webkit-box-shadow 和 box-shadow 的区别-css教程-PHP中文网

首页

web前端

css教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 26, 2023 pm 11:57 PM

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

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

Box-shadow 属性

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

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

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

我们可以使用 - 为元素指定一个盒子阴影 -

两个值 - 每当我们使用带有两个值的 box-shadow 属性时，它们将用作 X 和 Y 偏移的值。
三个值 - 前两个值充当 X 和 Y 偏移值，而第三个值用于模糊半径效果。
四个值 - 第四个值被视为扩散半径的值，其余值分别是 X 偏移、Y 偏移和模糊半径的值。
Inset - 它是一个可选值，其存在会使框架的阴影偏向一侧。如果我们不指定这一点，阴影似乎会在上方凸起，就像投影
颜色- 这是另一个设置阴影颜色的可选值。如果未指定，颜色默认为元素的当前颜色。

它的初始值为none，适用于所有元素。可以使用shadow list的动画类型进行动画处理，但不可继承。

示例

下面给出了在 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 的网络浏览器引擎，几乎所有 macOS 应用程序都使用它。还有很多其他的网络浏览器引擎，例如 Firefox 的 Gecko、edge 的 Blink 等等。所以，问题就出现了，为什么我们需要它们。

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

CSS 中的 Webkit-box-shadow 属性

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

可以赋予该属性的可能值是 -

X-offset - 它指定到元素的水平偏移或距离。
Y 偏移 - 这也指定偏移或距离，但在垂直方向
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 id="Sample-text">Sample text</h1>
      <p>Some more random text</p>
   </div>
</body>
</html>

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

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

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

结论

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

以上是CSS 中 -webkit-box-shadow 和 box-shadow 的区别的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：tutorialspoint。如有侵权，请联系admin@php.cn删除