資料結構
網路
關係資料庫管理系統 (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 次瀏覽
