好看的卡片陰影

在前端頁面中設置一個div有卡片的效果，咱們只要設置好CSS中的box-shadow的屬性就能夠了

咱們先看一下box-shadow和sketch參數之間的設置對比

CSS中的box-shadow屬性參數表

屬性	必選/可選	表達	容許負值	對應sketch的參數
h-shadow	必選	水平陰影的位置	容許	對應x值
v-shadow	必選	垂直陰影的位置	容許	對應y值
blur	可選	模糊距離	不容許	對應模糊
spread	可選	陰影的尺寸	容許	對應擴展
color	可選	陰影的顏色	-	對應顏色
inset	可選	將外部陰影 (outset) 改成內部陰影	-	對應內陰影

用sketch畫一個卡片來測試還原度

*當box-shadow參數和設計稿參數一致時基本還原度是100%

經過以上截圖咱們發現box-shadow少了一個參數；那就是spread；對應sketch裏的擴展，

若是不寫這個參數默認長度爲0；也是開發最容易忽略的。

在作陰影的過程當中當遇到特殊狀況或當前頁面須要更乾淨的陰影使界面看起來更舒服，

咱們能夠對陰影進行收縮相應的像素。

收縮先後卡片對比

作好看的陰影&彌散

咱們常常會遇到彩色的或漸變色的卡片以及彩色的按鈕；

給這樣的卡片作出彌散效果的陰影可能就須要給陰影作收縮才能感受彌散效果舒服些。

下邊看兩個設計上實現彌散的效果

從視覺上來看兩種陰影效果是同樣的；可是實現的過程不同

第一種是直接給卡片設置陰影參數，而後作一個收縮；

第二種是在卡片底部作一個比卡片小的卡片設置模糊經過位置設定達到投影的效果；

理論上來說兩種均可以開發實現這種效果，可是爲了減小開發工做量和兼容定位問題

第一種方案是最合理的，只須要注意不要少掉擴展這個參數；

這裏只介紹了CSS樣式的參數；

Android和iOS的實現方式和這個不太同樣可是也能達到彌散陰影的效果，

Android能夠經過CardView的cardElevation屬性設置z軸高度來控制陰影大小；

iOS能夠經過UIView的layer的UIBezierPath屬性來設置陰影的形狀及範圍。

什麼狀況下會用到兩層分開的狀況呢？

通常爲特殊狀況；多爲頂層爲圖片的狀況，須要圖片和陰影分開定位，

固然這樣就能夠給圖片和陰影分開作動效開發了，在動效實現上會更加靈活；

對於大圖狀況下開發出陰影效果會比直接切圖清晰太多，可是在網絡環境很差

的狀況下也會出現圖片加載速度沒有陰影出來的快的情況；

因此通常不是爲了實現動效的狀況下仍是避免這種狀況。

CSS樣式參考網址

codepen.io

END