首頁 >web前端 >css教學 >CSS 中 -webkit-box-shadow 和 box-shadow 的區別

CSS 中 -webkit-box-shadow 和 box-shadow 的區別

WBOY轉載: 2023-08-26 23:57:021632瀏覽

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>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中文網其他相關文章！

firefox css chrome safari webkit edge 继承选择器伪类 macos

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

看更多