好看的卡片陰影
摘要：
在前端頁面中設定一個div有卡片的效果，我們只要設定好CSS中的box-shadow的屬性就可以了
我們先看一下box-shadow和sketch引數之間的設定對比
CSS中的box-shadow屬性引數表
屬性
必選/可選 ...
在前端頁面中設定一個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樣式參考網址
END