Question

我正在查看一些基于材料设计的框架的代码，我发现实现的按钮经常在CSS中“投射”两个阴影。这是一个css声明的例子：

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

所以这两个阴影位于完全相同的位置，一个模糊为6px，下一个模糊为4px。我理解这段代码的作用，但我不明白将两个阴影放在完全相同的坐标上的动机。

请帮助更好地了解这种视觉效果。

组件示例：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>

在“材质设计”中提升元素的框阴影中的多个阴影

1 个答案: