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

Galence 發布于2019-08-30 13:00 / 1904人閱讀

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

前言

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

二話不說看效果

3D小球

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

細讀屬性

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

概述屬性語法

box-shadow: none | [,]*

默認值為none

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

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

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

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

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

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

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

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

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

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

outer-box-shadow

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

實現原理：

創建一個與元素border box尺寸一致的陰影盒子;

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

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

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

根據blur radius對陰影盒子作加工;

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

模擬一下：

inner-box-shadow

特點：陰影落在元素的padding box之內。

實現原理(純個人理解)：

創建一個與元素padding box尺寸一致的陰影盒子;

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

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

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

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

根據blur radius加工元素各padding edge至其對應的guideline間的區域.

對陰影盒子進行剪裁

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

僅顯示元素各padding edge至其對應的guideline間的區域。

模擬一下：

模糊邊框 by blur radius

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



  sample1


  sample2


  sample3

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

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

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

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

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

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

縮放陰影尺寸 by spread distance

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



  sample1


  sample2


  sample3

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

弄清各圖層的z-index

上圖可以看到沒有陰影時，各圖層的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定位一樣，不會占據Normal flow的空間，也不會影響其他元素的布局，因此僅修改陰影位置或尺寸時，只會觸發repaint，而不會觸發reflow。

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

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


sample1

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

被割裂的box-shadow

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

box-decoration-break: slice | clone

slice是默認值，表示首先按未拆分時的狀態渲染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均不支持，FF支持得最好，而Webkit內核的則要加-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");
}

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

總結

尊重原創，轉載請注明來自：http://www.cnblogs.com/fsjohnhuang/p/5477194.html^_^肥仔John

感謝

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

云服務器 GPU云服務器沒那么簡單 css簡單簡單css box-shadow

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115237.html

CSS魔法堂：重拾Border之——更廣闊的遐想

摘要：也就是說我們操作的幾何公式中的未知變量，而具體的畫圖操作則由渲染引擎處理，而不是我們苦苦哀求設計師幫忙。前言 ?當CSS3推出border-radius屬性時我們是那么欣喜若狂啊，一想到終于不用再添加額外元素來模擬圓角了，但發現border-radius還分水平半徑和垂直半徑，然后又發現border-top-left/right-radius的水平半徑之和大于元素寬度時，實際值會按比...

lily_wang 2019-08-30 13:01 評論0 收藏0
CSS魔法堂：改變單選框顏色就這么吹毛求疵！

摘要：前言是否曾經被業務提出能改改這個單選框的顏色吧讓它和主題顏色搭配一下吧，然后苦于原生不支持換顏色，最后被迫自己手擼一個湊合使用。設置為的樣式行為特征單選框的行為特征，明顯就是選中與否，及選中狀態的改變事件，因此我們必須保持對外提供事件。前言 ?是否曾經被業務提出能改改這個單選框的顏色吧！讓它和主題顏色搭配一下吧！，然后苦于原生不支持換顏色，最后被迫自己手擼一個湊合使用。若拋開inpu...

freecode 2019-08-29 16:52 評論0 收藏0
CSS魔法堂：那個被我們忽略的outline

摘要：真心沒法弄出圓角自從有了后，我們就可以通過制作圓角矩形圓形等圖形，甚至連也受到影響從而實現元素陰影也能做到圓角的效果。那么是否也能做出圓角的效果呢答案是否定的。前言 ?在CSS魔法堂：改變單選框顏色就這么吹毛求疵！中我們要模擬原生單選框通過Tab鍵獲得焦點的效果，這里涉及到一個常常被忽略的屬性——outline，由于之前對其印象確實有些模糊，于是本文打算對其進行稍微深入的研究^_^ ...

Rocko 2019-08-29 16:54 評論0 收藏0
CSS魔法堂：display:none與visibility:hidden的恩怨情仇

摘要：不耽誤表單提交數據雖然我們無法看到的元素，但當表單提交時依然會將隱藏的元素的值提交上去。讓元素在見面上不可視，但保留元素原來占有的位置。不過由于各瀏覽器實現效果均有出入，因此一般不會使用這個值。繼承父元素的值。前言 ?還記得面試時被問起請說說display:none和visibility:hidden的區別嗎？是不是回答完display:none不占用原來的位置，而visibilit...

selfimpr 2019-08-30 15:54 評論0 收藏0
CSS魔法堂：更豐富的前端動效by CSS Animation

摘要：無效生效重復怎么辦與規則一樣，標準規定相同的關鍵幀不產生層疊，僅最后出現的認定為有效。但實際上和均將關鍵幀設計為可層疊的。為默認值，表示動畫一結束，動畫效果就結束表示動畫一開始就馬上執行完第一個關鍵幀的效果。前言 ?在《CSS魔法堂：Transition就這么好玩》中我們了解到對于簡單的補間動畫，我們可以通過transition實現。那到底多簡單的動畫適合用transtion來實現呢...

MrZONT 2019-08-30 15:54 評論0 收藏0