眾所周知，CSS 為我們提供了廣泛的屬性和偽類，使開發人員能夠為元素添加所需的樣式。其中一個屬性是盒子陰影屬性；它允許我們在元素周圍添加類似陰影的效果。
Box Shadow 是一個 CSS 屬性，用於在元素上建立外部或內部陰影效果。它將一個或多個陰影應用於元素，每個陰影都透過距元素的 X 和 Y 偏移、模糊半徑、擴散半徑、顏色和不透明度值來指定。
box-shadow屬性可以接受多個值，以逗號分隔；每個值定義一個陰影效果。沒有任何偏移的盒子陰影將使其看起來像平面形狀，就像印在紙上一樣。
假設我們要應用 box-shadow 的元素指定了某種形式的 borderradius，box-shadow 的效果也將像該元素一樣具有彎曲的邊框。多個盒子陰影在 z 軸上的順序與多個文字陰影的順序相同。
我們可以使用 - 為元素指定一個盒子陰影 -
兩個值 - 每當我們使用帶有兩個值的 box-shadow 屬性時，它們將用作 X 和 Y 偏移的值。
三個值 - 前兩個值充當 X 和 Y 偏移值，而第三個值用於模糊半徑效果。
四個值 - 第四個值視為擴散半徑的值，其餘值分別是 X 偏移、Y 偏移和模糊半徑的值。
Inset - 它是一個可選值，其存在會使框架的陰影偏向一側。如果我們不指定這一點，陰影似乎會在上方凸起，就像投影#
##顏色- 這是另一個設定陰影顏色的可選值。如果未指定，則顏色預設為元素的目前顏色。
範例
<!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>
什麼是 webkit？
Webkit 是Apple 的網頁瀏覽器引擎，幾乎所有 macOS 應用程式都使用它。還有很多其他的網頁瀏覽器引擎，例如 Firefox 的 Gecko、edge 的 Blink 等等。所以，問題就出現了，為什麼我們需要它們。
CSS 選擇器上的 -webkit 前綴表示僅由該引擎處理的屬性，類似於 -moz 屬性。透過指定這一點，我們基本上是告訴瀏覽器僅在使用特定瀏覽器引擎時才使用它，否則保持原樣。使用起來比較麻煩；這就是為什麼許多開發者希望它盡快停止。CSS 中的 Webkit-box-shadow 屬性
webkit-box-shadow 屬性也會在所套用的元素的框架中加入類似陰影的效果。但要注意的是，它的實作是特定於 Chrome 或 Apple Safari 等瀏覽器的。
可以賦予該屬性的可能值是 -
X-offset - 它指定到元素的水平偏移或距離。
Y 偏移量 - 這也指定偏移或距離，但在垂直方向
#Blur - 它是一個長度值，如果它很大，創建的模糊效果也會很大，因此陰影效果會變大，反之亦然。
<!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>
以上是CSS 中 -webkit-box-shadow 和 box-shadow 的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！
