果展示

思路分析

層級思路

從展示的效果可以猜到這個效果由3層文字組成。

• 表面一層黑色文字
• 中間一層白色文字
• 最低的一層是斑馬條紋文字

要實現多層文字，我首先想到的是文字投影 text-shadow ，但通常 text-shadow 只能投個純色出來。

于是思路要改一下，黑色和白色層是投影，斑馬條紋是真正的文字本身。

斑馬紋思路

看到這種條紋效果，我想到了背景圖漸變。

1. 直接使用圖片實現斑馬紋路
2. 使用 background-image 里的線性漸變 linear-gradient

第一種思路不推薦，因為作為一個有追求的前端能不使用圖片就盡量別使用圖片！

漸變紋路的想法確定后，就可以使用 background-clip: text 規定背景圖案渲染到文本中。

這個方法經常用來做文字特效。

要將背景渲染到文本中還需要把文字原本的顏色設置成透明，這樣才能把背景圖案顯示出來。

color: transparent;
-webkit-text-fill-color: transparent;

-webkit-text-fill-color 是用來指定文字填充顏色，如果同時出現 -webkit-text-fill-color 和 color，-webkit-text-fill-color 將覆蓋 color 的顏色。

但 -webkit-text-fill-color 并不是標準屬性，這里之所以這樣寫，是因為怕 color 被其他更高權重的規則覆蓋了。

編碼

多數人使用box-shadow的方法是，指定三個長度值和一個顏色值

box-shadow: 2px 3px 4px rgba(0,0,0, .5);

這句話的意思就是：

1. 以該元素相同的尺寸和位置，畫一個rgba(0,0,0, .5)的矩形．
2. 把它右移２px，向下移３px
3. 使用高斯模糊算法或類似算法將它進行４px的模糊處理．這在本質上表示在陰影邊緣發生陰影色和純透明色之間的顏色過度，近似于模糊半徑的兩倍，比如在這里就是８px.
4. 接下來，模糊后的矩形與原始元素的交集部分會被切除掉，因此它看起來像是在該元素的后面．

使用４px的模糊半徑意味著投影的尺寸會比元素本身的尺寸大約８px（上下左右各4px），因此投影的最外圈會從元素外顯露出來．所以我們只需要改變偏移量，就可以把投影的頂部和左側隱藏起來，只要這兩個方向上的偏移量不小于4px就可以。

box-shadow: 5px 5px 4px rgba(0,0,0, .5);

但是這樣的話，在某種程度上會導致外露的投影太過濃重，看起來不美觀。

另外就算勉強可以接受，我們想要的是單側投影，而不是相鄰的兩側。

最終的解決方案是box-shadow的第四個長度參數，它是擴張半徑：

這個參數會根據你指定的值去擴大或（當指定負值時）縮小投影的尺寸。

舉例來說，一個-5px的擴張半徑會把投影的寬度和高度縮小10px - 每邊各5px。因此如下時，完全沒有投影：

box-shadow: 0px 0px 4px -4px rgba(0,0,0, .5);

所以，此時給投影一個正的垂直偏移量就會產生單側投影：

box-shadow: 0px 5px 4px -4px rgba(0,0,0, .5);

如果把單側投影的方式運用兩次就會得到雙側投影：

      box-shadow: 0px 5px 4px -4px rgba(0,0,0, .5),
                  0px -5px 4px -4px rgba(0,0,0, .5);

最后是實驗的全部代碼

影經常出現在設計師的設計稿中，web想要實現投影效果必須借助圖片，圖片的大小尺寸、自適應問題的存在，使得整個投影很“尷尬”，shadow屬性可以很好的還原投影效果，利用投影可以大大提高web呈現效果，區塊投影、文字投影各有各的妙用！！！