CSS3 box-shadow闡述

一、box-shadow簡介

box-shadow用於對元素添加一個或多個投影。它的語法如下：

box-shadow: h-shadow v-shadow blur spread color inset;

box-shadow屬性可以接受多個陰影值，用逗號分隔。在每個陰影值內部，可以包含1-4個值，分別為偏移量，模糊半徑，擴散半徑和顏色。其中，偏移量必選，其他值可選。下面，我們將按照參數的類型闡述box-shadow屬性。

二、陰影偏移量

h-shadow和v-shadow是box-shadow屬性中必選的參數。它們分別表示陰影的水平和垂直偏移。可以為這兩個參數設置正負值，正數表示陰影在元素右側（水平偏移）、下側（垂直偏移），負數則表示陰影在元素左側、上側。

例如，下面的代碼演示了一個向右兩像素、向下三像素的紅色陰影：

box-shadow: 2px 3px red;

此外，h-shadow和v-shadow還可以是一個長度值或百分比值，它們決定了陰影的參照物。如果這兩個值為0，陰影將和元素重疊。

三、模糊半徑

blur參數可選，用於設置陰影的模糊半徑，也就是模糊的程度，數值越大越模糊。如果這個值為0，陰影就是一個純色的小圓點，沒有任何擴散效果。

例如，下面的代碼描繪了一個紅色模糊半徑為5像素的陰影：

box-shadow: 2px 3px 5px red;

四、擴散半徑

spread參數用於設置陰影的擴散半徑，也就是陰影擴展或收縮的程度，數值越大，陰影越大。如果這個值為負，陰影就縮小到元素內部。

例如，下面的代碼描繪了一個紅色擴散半徑為10像素的陰影：

box-shadow: 2px 3px 5px 10px red;

五、陰影顏色

color參數用於設置陰影的顏色，可以使用CSS顏色名、RGB值、十六進位值，也可以使用關鍵字none。如果省略這個值，默認是黑色。另外，如果在一個box-shadow值中沒有color值，陰影就不會出現。

例如，下面的代碼演示了一個偏移值為5像素、紅色、模糊半徑為5像素、擴散半徑為10像素的陰影：

box-shadow: 5px 5px 5px 10px red;

六、插入陰影

inset參數用於設置陰影是嵌入還是突出。如果值為inset，陰影被內嵌到元素中，而不是通過外部投射矩形框來繪製陰影。默認情況下，陰影是投射於元素之外。

例如，下面的代碼演示了一個偏移值為5像素、黑色、內嵌的陰影：

box-shadow: inset 5px 5px black;

七、不規則形狀陰影

box-shadow不僅能給常見的形狀添加陰影，也能給不規則形狀添加陰影，這點就是傳統實現方式所不能達到的。下面的代碼演示了如何給一個不規則的圖像添加陰影：

div {
 width: 200px;
 height: 200px;
 background: url("https://mdn.mozillademos.org/files/16480/starsolid.gif"), url("https://mdn.mozillademos.org/files/16475/moon2.png");
 background-size: 100px 100px, 80px 80px;
 border-radius: 50%;
 box-shadow: inset -3px -3px 3px rgba(0,0,0,0.5), 3px 3px 3px rgba(0,0,0,0.5);
}
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/242318.html