数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究CSS 中 -webkit-box-shadow 和 box-shadow 的区别
我们已经知道 CSS 提供了广泛的属性和伪类，使开发人员能够为元素添加所需的样式。其中一个属性是盒阴影属性；它允许我们在元素周围添加阴影效果。
box-shadow 属性
box-shadow 是一个 CSS 属性，用于在元素上创建外部或内部阴影效果。它将一个或多个阴影应用于元素，每个阴影都由元素的 X 和 Y 偏移量、模糊半径、扩展半径、颜色和不透明度值指定。
box-shadow 属性可以接受多个以逗号分隔的值；每个值定义一个单独的阴影效果。应用时没有任何偏移量的 box-shadow 将使其看起来像一个扁平的形状，好像它打印在纸上一样。
假设我们应用 box-shadow 的元素指定了某种形式的 border-radius，则 box-shadow 的效果也将具有与元素相同的弯曲边框。多个 box-shadow 的 z 轴顺序与多个文本阴影的顺序相同。
我们可以使用以下方法为元素指定 box-shadow：
两个值 - 每当我们使用带有两个值的 box-shadow 属性时，它们将用作 X 和 Y 偏移量的值。
三个值 - 前两个值用作 X 和 Y 偏移量的值，而第三个值用于模糊半径效果。
四个值 - 第四个值被视为扩展半径的值，其余值分别为 X 偏移量、Y 偏移量和模糊半径。
inset - 这是一个可选值，它的存在使框架的阴影位于一侧。如果我们不指定它，阴影似乎会升高，就像投影一样。
颜色 - 这是另一个可选值，它设置阴影的颜色。如果未指定，则颜色默认为元素的当前颜色。
它的初始值为 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 是苹果的网页浏览器引擎，几乎所有 macOS 应用程序都使用它。还有许多其他网页浏览器引擎，例如 Firefox 的 Gecko，Edge 的 Blink 等等。所以，问题出现了，为什么我们需要它们。
CSS 选择器上的 -webkit 前缀表示仅供此引擎处理的属性，类似于 -moz 属性。通过指定它，我们基本上是在告诉浏览器只有在使用特定浏览器引擎时才使用它，否则保持原样。使用它相当麻烦；这就是为什么许多开发人员希望很快停止使用它的原因。
CSS 中的 webkit-box-shadow 属性
与 box-shadow 属性一样，webkit-box-shadow 属性也会为应用它的元素框架添加类似阴影的效果。但需要注意的是，它的实现是特定于 Chrome 或 Apple 的 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”仅适用于使用特定 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 语法取代。因为大多数现代浏览器都支持它。总而言之，这两个属性都用于在元素上创建阴影，但只应使用一个，因为另一个最终会被弃用。
702 次浏览
