box-shadow-陰影，你真的懂嗎

語言: CN / TW / HK
時間 2022-04-07 01:15:19

theme: channing-cyan

一起養成寫作習慣！這是我參與「掘金日新計劃 · 4 月更文挑戰」的第5天，點選檢視活動詳情。

大家好，我是半夏👴，一個剛剛開始寫文的沙雕程式設計師.如果喜歡我的文章，可以關注➕ 點贊 👍 加我微信：frontendpicker，一起學習交流前端，成為更優秀的工程師～關注公眾號：搞前端的半夏,瞭解更多前端知識.點我探索新世界！

在日常的前端開發中， 我們會經常使用陰影這個效果,（當然你通常是做***管理系統的話，可能有的比較少）例如下面的一段程式碼，這段程式碼是從ant-design 官網上覆制下來的程式碼。

box-shadow: 1px 0 #0000000f, 0 1px #0000000f, 1px 1px #0000000f, 1px 0 #0000000f inset, 0 1px #0000000f inset;

作為CSS中最基礎的屬性（個人想法），大家都知道box-shadow是用來製作陰影的，但是你真的知道他是如何生成陰影的嗎？他的每個值的意義嗎？

作用

box-shadow可以將一個陰影或者多個陰影附加到盒子上，他可以接受沒有陰影的none或者以逗號分割的陰影列表。

語法

box-shadow接受2-4個長度值，一個可選的顏色值，一個可選的inset關鍵字，省略的長度值預設為0。 /* x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影擴散半徑 | 陰影顏色 */ box-shadow:offset-x offset-y blur-radius spread-radius. color position； box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); 請注意這裡最少需要兩個長度值，也就是offset-x 和offset-y，陰影模糊/擴散半徑可以省略，預設為零！

  • offset-x : 橫向偏移量。正值陰影偏移到容器右側）負值陰影在容器左側。

    box-shadow: -5px 20px 0px 0px green, 5px 20px 0px 0px red ;

    image-20220314224442111

  • offset-y：豎向偏移量，正值陰影偏移到容器下方，負值陰影偏移到容器上方

  • blur-radius ：取值為[0,∞],負值無效。

  • spread-radius：表示陰影的擴充套件半徑，正值表示往外擴充套件半徑，負值表示往內收縮半徑。

  • color: 顏色值，指定陰影的顏色。可以省略，省略預設值為currentColor.currentColor是CSS的一個關鍵字。

  • inset：內陰影。這個屬性也可以解除安裝offset-x前面。

陰影是在容器上層的

在陰影的應用過程中， 我起初並沒有意識到陰影是在容器的上層的，並且它並不會被計算成內容。

知道使用inset這個屬性，我才意識到陰影是在容器的上方的。當然這也可能是內陰影和外陰影的差別。

.boxShadow{ width: 200px; height: 200px; border: 1px solid #000; box-shadow: 5px 20px 0px 0px green ; }

image-20220314223426492

但是看下面的這個例子：我們有兩個相鄰的容器，當給上面的容器新增陰影，整個陰影會覆蓋在下方

容器的上面，因為上下兩個容器是在同一層面的，所以我們可以得出來，陰影是在容器的上層的！

image-20220314222900066

我們仔細觀察會發現，雖然陰影超出容器那麼多，但是容器並不會出現滾動條，這完全可以說明容器不會作為內容計算！

陰影的前世今生

.boxShadow{ width: 200px; height: 200px; border: 1px solid #000; }

上面的程式碼我們定義了一個寬高均為200px的容器

image-20220314231227614

陰影的大小與offset

box-shadow: 0px 0px 0px 0px green;

當我們設定偏移量均為0的時候，效果如下：

image-20220314231357768

此時並沒有出現陰影，我們猜想陰影和容器的大小是一致的嗎？還是小的。

下面我們加上橫向和豎向的偏移

box-shadow: 20px 20px 0px 0px green;

image-20220314231549077

此時我們可以觀察到，陰影出現的兩條邊是和容器一樣長的。所以我們確定陰影是和容器一樣大的！

image-20220314232035965

當我們給陰影設定橫向和豎向偏移的時候，整體直接進行了偏移，然後瀏覽器將容器上方的那一塊給裁剪掉了！

blur-radius

我們先來看一下官方文件的解釋：

A non-zero blur radius indicates that the resulting shadow should be blurred, such as by a Gaussian filter. The exact algorithm is not defined; however the resulting shadow must approximate (with each pixel being within 5% of its expected value) the image that would be generated by applying to the shadow a Gaussian blur with a standard deviation equal to half the blur radius

也就是說，當我們給陰影加上模糊半徑的時候，這個陰影會以每條邊的的中心為開始，往線的兩邊模糊，並且這個半徑是模糊半徑一半的！

我們有20px模糊半徑：

``` -shadow: 40px 20px 20px 0px green;

```

image-20220314234228878

為了直觀的展示，我們將陰影偏移到容器外面。

``` box-shadow: 300px 0px 60px 0px #0d00ff;

```

我們用跟容器一樣大的紅框標記陰影的原本尺寸，然後用肉眼找到往裡消失的邊界（可能不太準），會發現這個內外的模糊大小是一樣的。

image-20220314233809551

spread-radius

在MDN上，第四個變數被稱作擴散半徑。但是我更喜歡稱之為擴散距離！

我們在沒有模糊半徑的情況下

``` box-shadow: 20px 20px 0px 10px green;

```

設定擴散半徑是10px，會發現整個陰影的四周都多了10px的距離。它其實改變的是陰影的大小。開始的時候陰影的大小和容器一樣大，設定擴散半徑之後，陰影會往四個方向增加尺寸。

image-20220314234728067

此時如果設定了模糊半徑，此時陰影就會以新的的中心為起點，往線的兩邊模糊。

image-20220314235252860

「」
「」