知識儲備

1.box-shadow 向框添加一個或多個陰影
2.filter:drop-shadow() SVG濾鏡
和box-shadow效果類似，但是沒有模糊半徑和inset選項

測試

單邊陰影

用box-shadow來產生單邊陰影

html

<div class="unilateral-shadow"></div>

css

.unilateral-shadow{ 
   width: 100px; 
   height: 80px;  
   margin: 0 auto; 

   background: orangered;  
   box-shadow: 0 5px 4px -4px black;
}

思考
首先我們要了解到有 陰影距離(第四個參數)可以是負的

于是有 模糊距離+陰影距離=0 四側的陰影都被隱藏了

最后我們將陰影向下移動5px ，使下部的陰影顯示出來

相鄰兩邊陰影
效果：

相鄰兩邊陰影

html

<div class="two-adjacent-sides-shadow"></div>

css

.two-adjacent-sides-shadow{ 
   width: 100px;  
   height: 80px;  
   margin: 10px auto;   

   background: orangered;  
   box-shadow: 3px 3px 6px -3px black;
}

思考
公式： 模糊距離+陰影距離+移動距離 = 結果

左側陰影：6px+(-3px)-3px = 0
右側陰影：6px+(-3px)+3px = 6px
上下也類似

其他：對立兩側陰影
效果：

對立兩側陰影

特殊的陰影

效果：

1

2

3

第一個例子展示一下代碼
html

<div class="speech-bubble">Speech Bubble</div>

css

.speech-bubble{   
   width: 100px; 
   height: 100px;
   margin: 10px auto; 
   background: sandybrown;
   position: relative;
   border-radius: 5px; 
   text-align: center; 
   padding: 25px 0; 
   box-sizing: border-box;

   -webkit-filter: drop-shadow(2px 2px 2px rgba(0,0,0,.5));
   filter: drop-shadow(2px 2px 2px rgba(0,0,0,.5));   
   /* 不合適的box-shadow */  
   /*box-shadow: 3px 3px 6px -3px black;*/
}
.speech-bubble::before{  
   content: '';  
   width: 20px; 
   height: 20px; 
   position: absolute; 
   right: -10px; 
   top: 20px; 
   transform: rotate(45deg);  
   background: inherit;
}

思考
這里應用了filter:drop-shadow()屬性
缺點：當背景為透明時，如果字體設置了陰影，他會為陰影設置陰影，也就是陰影的陰影

這里綠色的是文字陰影，灰色是濾鏡陰影

當我們不想要文字陰影時，用text-shadow是取消不了的。所以只有取消濾鏡。真尷尬

讓我們來看看box-shadow的效果，平衡一下

小箭頭沒陰影

總結：我們在設計一些小細節(jié)的可以用到陰影。這樣的設計還是十分好看的