CSS魔法堂：Box-Shadow 沒那么簡單啦:)

Galence 發(fā)布于2019-08-30 13:00 / 1893人閱讀

摘要：陰影距離原位置的垂直位移，正數(shù)表示向下移動，負數(shù)表示向上移動。實現(xiàn)原理純個人理解創(chuàng)建一個與元素尺寸一致的陰影盒子將陰影盒子定位到于元素重合，并位于元素之上水平和垂直各畫兩條線，分別跟元素重合共條分別記為根據(jù)和移動。

前言

說起box-shadow那第一個想法當然就是用來實現(xiàn)陰影，其實它還能用于實現(xiàn)其他好玩的效果的，本篇就打算說說box-shadow的那些事。

二話不說看效果

3D小球

紙張陰影(來自@張鑫旭老師)

細讀屬性

看到上面這么絢麗的效果，是不是迫不及待想弄清box-shadow呢？下面我們來一步步解密它吧！

概述屬性語法

box-shadow: none | [,]*

默認值為none

`:`inset? && {2,4} && ?

shadow pattern 默認為outset，即采用outer box-shadow。通過設(shè)置為inset時，則采用inner box-shadow。

horizontal offset 陰影距離原位置的水平位移，正數(shù)表示向右移動，負數(shù)表示向左移動。

vertical offset 陰影距離原位置的垂直位移，正數(shù)表示向下移動，負數(shù)表示向上移動。

blur radius 默認值為0，陰影模糊度半徑。

spread distance 默認值為0，擴展或縮小陰影的作用面積。

陰影顏色，默認與color屬性一致。

注意：我們可以同時設(shè)置多個陰影，而陰影的z-index值從左向右遞減。

outer box-shadow 和 inner box-shadow怎么玩？

默認情況下采用的是outer box-shadow，當在box-shadow中添加inset關(guān)鍵詞后，則采用inner box-shadow了，但到底它倆的效果是如何的呢？

outer-box-shadow

特點：陰影落在元素的border box之外。

實現(xiàn)原理：

創(chuàng)建一個與元素border box尺寸一致的陰影盒子;

將陰影盒子定位到于元素border box重合，并位于元素之下;

根據(jù)horizontal offset和vertical offset來相對原位置作移動;

根據(jù)spread distance縮放陰影盒子的尺寸（會改變盒子的位移）;

根據(jù)blur radius對陰影盒子作加工;

最后將陰影盒子與元素border box重合部分剪切掉。

模擬一下：

inner-box-shadow

特點：陰影落在元素的padding box之內(nèi)。

實現(xiàn)原理(純個人理解)：

創(chuàng)建一個與元素padding box尺寸一致的陰影盒子;

將陰影盒子定位到于元素padding box重合，并位于元素之上;

水平和垂直各畫兩條線，分別跟元素padding edge重合;(共4條分別記為left/top/right/bottom-guideline)

根據(jù)horizontal offset和vertical offset移動left/top/right/bottom-guideline。

根據(jù)spread distance移動4條線。spread distance為正數(shù)時，left-guideline向右移動，top-guideline向下移動，right-guideline向左移動和bottom-guidelien向上移動；spread distance為負數(shù)時，則相反。

根據(jù)blur radius加工元素各padding edge至其對應(yīng)的guideline間的區(qū)域.

對陰影盒子進行剪裁

剪切掉不與元素padding box重疊的部分；

僅顯示元素各padding edge至其對應(yīng)的guideline間的區(qū)域。

模擬一下：

模糊邊框 by blur radius

W3C spec中沒有規(guī)定瀏覽器廠商使用哪種方式實現(xiàn)模糊效果，反正效果與高斯模糊效果差不多就是了。但有一點我們需要注意的，那就是模糊效果會擴大陰影的面積。



  sample1


  sample2


  sample3

sample1是blur radius為0的效果，可以看到陰影尺寸與元素尺寸一模一樣。而sample2是blur radius為20px的效果，可以看到陰影尺寸有所擴展了，而sample3則擴展得更多一些。

現(xiàn)在我們感性上認知到blur radius值大于0時會擴展陰影尺寸，那么到底擴展多少呢？那我們要先明確模糊發(fā)生的起始位置了。

對于outer-shadow-box而言，模糊發(fā)生的起始位置就是陰影盒子的各邊；

對于inner-shadow-box而言，模糊發(fā)生的起始位置就是各guideline。

然后模糊效果是從發(fā)生的位置，對于水平方向的邊或guideline則向垂直方向發(fā)散，對于垂直方向的邊或guideline則向水平方向發(fā)散，且發(fā)散的距離相同。

發(fā)散的距離相同，因此每個方向各發(fā)散為blur radius/2的距離。看sample3中陰影尺寸已經(jīng)與元素盒子重疊了，因為陰影盒子左邊框向左發(fā)散了20px了，超過它倆之間10px的水平距離了，而sample2則恰恰鄰近而已。

縮放陰影尺寸 by spread distance

如果說blur radius是暗地里擴大陰影的尺寸，那么spread distance則是明目張膽地縮放陰影的尺寸了。



  sample1


  sample2


  sample3

還記得《CSS魔法堂：重拾Border之——解構(gòu)Border》中提及通過border-top/right/bottom/left-colors實現(xiàn)彩虹邊框嗎？由于兼容性問題和1px對應(yīng)一種color的緣故，實際應(yīng)用得很少，但通過outer-box-shadow和spread distance我們就可以得到效果更好，兼容性很高的實現(xiàn)方案了。

弄清各圖層的z-index

上圖可以看到?jīng)]有陰影時，各圖層的z-index順序。那么陰影呢？

對于outer-box-shadow，則其z-index高于margin圖層，低于background-color圖層;

對于inner-box-shadow，則其z-index高于padding圖層，低于content圖層。

陰影的position

通過horizontal/vertical offset重定位陰影盒子，通過blur radius或spread distance縮放陰影盒子的尺寸，但請注意的是陰影盒子不影響其他盒子的布局，其實陰影盒子就相當于采用absolute定位一樣，不會占據(jù)Normal flow的空間，也不會影響其他元素的布局，因此僅修改陰影位置或尺寸時，只會觸發(fā)repaint，而不會觸發(fā)reflow。

圓角or直角box-shadow傻傻分不清楚？

陰影不僅默認尺寸與元素盒子一致，默認形狀也一致。也就是元素盒子采用圓角時，陰影的默認形狀也是圓角的。既然說是默認形狀一致，就是說可以不一致咯！那到底如何不一致呢，下面我們一起來看個究竟吧！


sample1

當設(shè)置spread distance后，border-radius的值也將隨之變化，具體公式為border-radius + spread-distance * (1 + (border-radius / spread-distance - 1)^3)。
因此spread distance為正數(shù)時，border-radius會變大; 而spread distance為負數(shù)時，border-radius會減小，直至為0px為止。

被割裂的box-shadow

當設(shè)置box-shadow的盒子被拆分為多個盒子時，其對應(yīng)的box-shadow又會如何呢？其實這不僅僅是box-shadow的問題，如border、background-image等均會遇到同樣的問題。CSS3中引入一個新特性box-decoration-break來設(shè)置上述情況時的渲染效果。

box-decoration-break: slice | clone

slice是默認值，表示首先按未拆分時的狀態(tài)渲染border、background-image等樣式，然后再將其直接拆分為多個盒子;

clone表示首先將其直接拆分為多個盒子，然后再逐個盒子渲染border、background-image等樣式。

Hey there, welcome to be here to share something aboute CSS together:) My name is fsjohnhuang, a FE from Midea. Enjoy the evolution of FE, and feel excited in the work I"m doing now.

從上面可以看到，與其說box-decoration-break的屬性值影響box-shadow的效果，還不如說是box-decoration-break的屬性值影響border-radius和border作用到元素盒子的效果，然后由盒子的效果再間接影響box-shadow的效果。

兼容性

IE和Edge均不支持，F(xiàn)F支持得最好，而Webkit內(nèi)核的則要加-webkit-前綴。對于不支持的瀏覽器，其效果如同box-decoration-break:slice。

兼容性

IE9都支持box-shadow多讓人可喜可賀的消息啊（因為我工作中只需兼容IE9+就Ok了:)）。但IE6~8呢？方案很多啦，上面也有簡單的介紹到。@張鑫旭老師提到在模擬blur radius效果時，采用以下方案

.ieBlock{
    height:100px;
    width:100px;
    background:#000;
    filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=10);
    -ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=10)"; 
}

要比采用以下方案要好！

.shadow {
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#000000")";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#000000");
}

另外若想不假思索地用到生產(chǎn)環(huán)境中，還是用成熟的CSS庫較好。具體請參考 PIE使IE支持CSS3圓角盒陰影與漸變渲染。

總結(jié)

尊重原創(chuàng)，轉(zhuǎn)載請注明來自：http://www.cnblogs.com/fsjohnhuang/p/5477194.html^_^肥仔John

感謝

the-box-shadow
break-decoration
CSS3 box-shadow實現(xiàn)紙張的曲線投影效果
CSS實現(xiàn)跨瀏覽器兼容性的盒陰影效果
CSS實現(xiàn)跨瀏覽器的box-shadow盒陰影效果(2)
PIE使IE支持CSS3圓角盒陰影與漸變渲染
《圖解CSS3核心技術(shù)與案例實戰(zhàn)》 —— 3.5 CSS3盒子陰影屬性