Material Designのエレベーテッド要素のボックスシャドーに複数の影があります

Question

材料設計ベースのフレームワークのコードを見ていて、実装されたボタンがCSSで2つのシャドウを「キャスト」していることがよくあります。ここでは、CSS宣言の例です：

box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px; 

は、したがって、これらは正確に同じ場所に配置された2つの影あり、一つは計6Pxのボケを持っており、次は4PXです。私はこのコードが何をしているのか理解していますが、まったく同じ座標に2つの影を置く動機を理解していません。

この視覚効果をよりよく理解するのを助けてください。コンポーネントの

例：http://www.material-ui.com/#/components/raised-button

Answer 1

二つの影は影の最後に要素のエッジからシャープまたはカスタム型の勾配を達成するために一緒にブレンドされている - あなたは、多くの場合、単一の影を達成することができない効果を。以下の例では、得られた影が異なっている：

#single { 
 
    box-shadow: 0 1px 4px rgba(0,0,0,1); 
 
    height: 100px; 
 
    margin-bottom: 20px; 
 
    width: 100px; 
 
} 
 

 
#multiple { 
 
    box-shadow: 0 1px 4px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.5); 
 
    height: 100px; 
 
    width: 100px; 
 
}

<div id="single"></div> 
 
<div id="multiple"></div>