你知道box-shadow 是如何生成的嗎？

在日常的前端開(kāi)發(fā)中， 我們會(huì)經(jīng)常使用陰影這個(gè)效果,（當(dāng)然你通常是做***管理系統(tǒng)的話(huà)，可能有的比較少）例如下面的一段代碼，這段代碼是從ant-design 官網(wǎng)上復(fù)制下來(lái)的代碼。

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

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

作用

box-shadow可以將一個(gè)陰影或者多個(gè)陰影附加到盒子上，他可以接受沒(méi)有陰影的none或者以逗號(hào)分割的陰影列表。

語(yǔ)法

box-shadow接受2-4個(gè)長(zhǎng)度值，一個(gè)可選的顏色值，一個(gè)可選的inset關(guān)鍵字，省略的長(zhǎng)度值默認(rèn)為0。

/* x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影擴(kuò)散半徑 | 陰影顏色 */ box-shadow:offset-x offset-y blur-radius spread-radius. color position； box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

請(qǐng)注意這里最少需要兩個(gè)長(zhǎng)度值，也就是offset-x 和offset-y，陰影模糊/擴(kuò)散半徑可以省略，默認(rèn)為零！

offset-x : 橫向偏移量。正值陰影偏移到容器右側(cè)）負(fù)值陰影在容器左側(cè)。

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

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

blur-radius ：取值為**[0,∞]**,負(fù)值無(wú)效。

spread-radius：表示陰影的擴(kuò)展半徑，正值表示往外擴(kuò)展半徑，負(fù)值表示往內(nèi)收縮半徑。

color: 顏色值，指定陰影的顏色。可以省略，省略默認(rèn)值為currentColor.currentColor是CSS的一個(gè)關(guān)鍵字。

inset：內(nèi)陰影。這個(gè)屬性也可以卸載offset-x前面。

陰影是在容器上層的

在陰影的應(yīng)用過(guò)程中， 我起初并沒(méi)有意識(shí)到陰影是在容器的上層的，并且它并不會(huì)被計(jì)算成內(nèi)容。

知道使用inset這個(gè)屬性，我才意識(shí)到陰影是在容器的上方的。當(dāng)然這也可能是內(nèi)陰影和外陰影的差別。

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

但是看下面的這個(gè)例子：我們有兩個(gè)相鄰的容器，當(dāng)給上面的容器添加陰影，整個(gè)陰影會(huì)覆蓋在下方

容器的上面，因?yàn)樯舷聝蓚€(gè)容器是在同一層面的，所以我們可以得出來(lái)，陰影是在容器的上層的！

我們仔細(xì)觀察會(huì)發(fā)現(xiàn)，雖然陰影超出容器那么多，但是容器并不會(huì)出現(xiàn)滾動(dòng)條，這完全可以說(shuō)明容器不會(huì)作為內(nèi)容計(jì)算！

陰影的前世今生

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

上面的代碼我們定義了一個(gè)寬高均為200px的容器

陰影的大小與offset

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

當(dāng)我們?cè)O(shè)置偏移量均為0的時(shí)候，效果如下：

此時(shí)并沒(méi)有出現(xiàn)陰影，我們猜想陰影和容器的大小是一致的嗎？還是小的。

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

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

此時(shí)我們可以觀察到，陰影出現(xiàn)的兩條邊是和容器一樣長(zhǎng)的。所以我們確定陰影是和容器一樣大的！

當(dāng)我們給陰影設(shè)置橫向和豎向偏移的時(shí)候，整體直接進(jìn)行了偏移，然后瀏覽器將容器上方的那一塊給裁剪掉了！

blur-radius

我們先來(lái)看一下官方文檔的解釋?zhuān)?/p>

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

也就是說(shuō)，當(dāng)我們給陰影加上模糊半徑的時(shí)候，這個(gè)陰影會(huì)以每條邊的的中心為開(kāi)始，往線(xiàn)的兩邊模糊，并且這個(gè)半徑是模糊半徑一半的！

我們有20px模糊半徑：

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

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

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

我們用跟容器一樣大的紅框標(biāo)記陰影的原本尺寸，然后用肉眼找到往里消失的邊界（可能不太準(zhǔn)），會(huì)發(fā)現(xiàn)這個(gè)內(nèi)外的模糊大小是一樣的。

spread-radius

在MDN上，第四個(gè)變量被稱(chēng)作擴(kuò)散半徑。但是我更喜歡稱(chēng)之為擴(kuò)散距離！

我們?cè)跊](méi)有模糊半徑的情況下

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

設(shè)置擴(kuò)散半徑是10px，會(huì)發(fā)現(xiàn)整個(gè)陰影的四周都多了10px的距離。它其實(shí)改變的是陰影的大小。開(kāi)始的時(shí)候陰影的大小和容器一樣大，設(shè)置擴(kuò)散半徑之后，陰影會(huì)往四個(gè)方向增加尺寸。

此時(shí)如果設(shè)置了模糊半徑，此時(shí)陰影就會(huì)以新的的中心為起點(diǎn)，往線(xiàn)的兩邊模糊。

容器

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶(hù)投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶(hù)投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。