材質設計中提升元素的陰影中的多個陰影

我正在查看一些基於材質設計的框架的代碼，並且我看到實現的按鈕通常在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

來源

2017-10-21 Juriy

兩個陰影混合在一起以實現從元件的邊緣更清晰或定製形狀的梯度陰影的端部 - 您經常不能與單陰影達到效果。在下面的例子中，導致陰影是不同的：

#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>

來源

2017-10-21 20:15:19

材質設計中提升元素的陰影中的多個陰影

回答

相關問題