材质设计中提升元素的阴影中的多个阴影

Question

我正在查看一些基于材质设计的框架的代码，并且我看到实现的按钮通常在CSS中“投射”两个阴影。这里的CSS声明的例子：

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

因此，这些都是定位在完全相同的地方两个影子，一个有6个像素模糊和下一个是4像素。我明白这段代码的作用，但我不明白将两个阴影放在完全相同的坐标上的动机。

请帮助更好地理解这种视觉效果。组分

实施例：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>