在最新的Material Design文档（https://www.google.com/design/spec/what-is-material/elevation-shadows.html#elevation-shadows-elevation-android-）中，引用了一组详尽的UI元素及其各自的高程（dp中的z-index）。例如，开关升高了 1dp ，而对话框升高了 24dp 。目前，Google的UI元素列表使用了10种不同的提升级别。由于高程决定了元素的阴影，我们需要10个不同的阴影。那就是我失去的地方。
如何为每个高程水平计算/推导出正确的阴影值（颜色，x偏移，y偏移，模糊，扩散）？
我发现了不同的来源，它们计算了5个不同高程（https://news.layervault.com/stories/42319-calculating-shadow-values-for-material-design）的阴影值。然而，5个提升步骤是不够的，他们也没有解释他们如何达到这些相应的值。
答案 0 :(得分：17)
有个好消息！我得到了从深度1到深度24的所有阴影深度。我是从Angular Material得到的。希望这会对你有所帮助。
.md-whiteframe-1dp {
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2),
0px 1px 1px 0px rgba(0, 0, 0, 0.14),
0px 2px 1px -1px rgba(0, 0, 0, 0.12); }
.md-whiteframe-2dp {
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2),
0px 2px 2px 0px rgba(0, 0, 0, 0.14),
0px 3px 1px -2px rgba(0, 0, 0, 0.12); }
.md-whiteframe-3dp {
box-shadow:0px 1px 8px 0px rgba(0, 0, 0, 0.2),
0px 3px 4px 0px rgba(0, 0, 0, 0.14),
0px 3px 3px -2px rgba(0, 0, 0, 0.12); }
.md-whiteframe-4dp {
box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
0px 4px 5px 0px rgba(0, 0, 0, 0.14),
0px 1px 10px 0px rgba(0, 0, 0, 0.12); }
.md-whiteframe-5dp {
box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
0px 5px 8px 0px rgba(0, 0, 0, 0.14),
0px 1px 14px 0px rgba(0, 0, 0, 0.12); }
.md-whiteframe-6dp {
box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
0px 6px 10px 0px rgba(0, 0, 0, 0.14),
0px 1px 18px 0px rgba(0, 0, 0, 0.12); }
.md-whiteframe-7dp {
box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2),
0px 7px 10px 1px rgba(0, 0, 0, 0.14),
0px 2px 16px 1px rgba(0, 0, 0, 0.12); }
.md-whiteframe-8dp {
box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
0px 8px 10px 1px rgba(0, 0, 0, 0.14),
0px 3px 14px 2px rgba(0, 0, 0, 0.12); }
.md-whiteframe-9dp {
box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.2),
0px 9px 12px 1px rgba(0, 0, 0, 0.14),
0px 3px 16px 2px rgba(0, 0, 0, 0.12); }
.md-whiteframe-10dp {
box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2),
0px 10px 14px 1px rgba(0, 0, 0, 0.14),
0px 4px 18px 3px rgba(0, 0, 0, 0.12); }
.md-whiteframe-11dp {
box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, 0.2),
0px 11px 15px 1px rgba(0, 0, 0, 0.14),
0px 4px 20px 3px rgba(0, 0, 0, 0.12); }
.md-whiteframe-12dp {
box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2),
0px 12px 17px 2px rgba(0, 0, 0, 0.14),
0px 5px 22px 4px rgba(0, 0, 0, 0.12); }
.md-whiteframe-13dp {
box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2),
0px 13px 19px 2px rgba(0, 0, 0, 0.14),
0px 5px 24px 4px rgba(0, 0, 0, 0.12); }
.md-whiteframe-14dp {
box-shadow: 0px 7px 9px -4px rgba(0, 0, 0, 0.2),
0px 14px 21px 2px rgba(0, 0, 0, 0.14),
0px 5px 26px 4px rgba(0, 0, 0, 0.12); }
.md-whiteframe-15dp {
box-shadow: 0px 8px 9px -5px rgba(0, 0, 0, 0.2),
0px 15px 22px 2px rgba(0, 0, 0, 0.14),
0px 6px 28px 5px rgba(0, 0, 0, 0.12); }
.md-whiteframe-16dp {
box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2),
0px 16px 24px 2px rgba(0, 0, 0, 0.14),
0px 6px 30px 5px rgba(0, 0, 0, 0.12); }
.md-whiteframe-17dp {
box-shadow: 0px 8px 11px -5px rgba(0, 0, 0, 0.2),
0px 17px 26px 2px rgba(0, 0, 0, 0.14),
0px 6px 32px 5px rgba(0, 0, 0, 0.12); }
.md-whiteframe-18dp {
box-shadow: 0px 9px 11px -5px rgba(0, 0, 0, 0.2),
0px 18px 28px 2px rgba(0, 0, 0, 0.14),
0px 7px 34px 6px rgba(0, 0, 0, 0.12); }
.md-whiteframe-19dp {
box-shadow: 0px 9px 12px -6px rgba(0, 0, 0, 0.2),
0px 19px 29px 2px rgba(0, 0, 0, 0.14),
0px 7px 36px 6px rgba(0, 0, 0, 0.12); }
.md-whiteframe-20dp {
box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2),
0px 20px 31px 3px rgba(0, 0, 0, 0.14),
0px 8px 38px 7px rgba(0, 0, 0, 0.12); }
.md-whiteframe-21dp {
box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2),
0px 21px 33px 3px rgba(0, 0, 0, 0.14),
0px 8px 40px 7px rgba(0, 0, 0, 0.12); }
.md-whiteframe-22dp {
box-shadow: 0px 10px 14px -6px rgba(0, 0, 0, 0.2),
0px 22px 35px 3px rgba(0, 0, 0, 0.14),
0px 8px 42px 7px rgba(0, 0, 0, 0.12); }
.md-whiteframe-23dp {
box-shadow: 0px 11px 14px -7px rgba(0, 0, 0, 0.2),
0px 23px 36px 3px rgba(0, 0, 0, 0.14),
0px 9px 44px 8px rgba(0, 0, 0, 0.12); }
.md-whiteframe-24dp {
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),
0px 24px 38px 3px rgba(0, 0, 0, 0.14),
0px 9px 46px 8px rgba(0, 0, 0, 0.12); }
答案 1 :(得分：13)
我认为这是一个我想出的功能，我相信：
（JavaScript）的
function getShadow(object, dp)
{
if (dp <= 0)
{
panel.style.boxShadow = "none";
return;
}
panel.style.boxShadow = "0px " + dp + "px " + dp + "px " + "rgba(0, 0, 0, .38)";
}
jfiddle：https://jsfiddle.net/crkb906z/
基本上，与基础层的距离是阴影顶部向下的距离，并且我使用相同的模糊值使材料变得更加模糊。
我将其结果与聚合物使用的3个阴影进行了比较，它们具有很强的可比性。由于我甚至无法找到大多数人提供的5层阴影之间的一致性，因此我想象它的计算方式并不那么重要。
修改
好的，在研究了5个深度的可用框阴影（它们来自here，但谷歌已经从文档中删除了它）之后，我想出了一个更复杂的公式，阴影看起来更像是该链接中的示例：
function applyShadow(element, dp)
{
if (dp == 0)
{
element.style.boxShadow = "none";
}
else
{
var shadow = "0px ";
var ambientY = dp;
var ambientBlur = dp == 1 ? 3 : dp * 2;
var ambientAlpha = (dp + 10 + (dp / 9.38)) / 100;
shadow += ambientY + "px " + ambientBlur + "px rgba(0, 0, 0, " + ambientAlpha + "), 0px ";
var directY = (dp < 10 ? (dp % 2 == 0 ? dp - ((dp / 2) - 1) : (dp - ((dp - 1) / 2))) : dp - 4);
var directBlur = dp == 1 ? 3 : dp * 2;
var directAlpha = (24 - Math.round(dp / 10)) / 100;
shadow += directY + "px " + directBlur + "px rgba(0, 0, 0, " + directAlpha + ")";
element.style.boxShadow = shadow;
}
}
我更新https://jsfiddle.net/crkb906z/1/以显示差异。
答案 2 :(得分：3)
这是Troncoso的配方移植到Stylus。
elevation(dp)
if dp == 0
box-shadow none
else
dp = unit(dp, px)
blur = (dp == 1 ? 3 : dp * 2)
amba = (dp + 10 + (dp / 9.38)) / 100
diry = (dp < 10 ? (dp % 2 == 0 ? dp - ((dp / 2) - 1) : (dp - ((dp - 1) / 2))) : dp - 4)
dira = (24 - (round(dp / 10))) / 100
box-shadow 0px dp blur rgba(0, 0, 0, amba), 0px diry blur rgba(0, 0, 0, dira)
答案 3 :(得分：2)
我之所以仅发布此答案，是因为Google官方的MDC Web高程设置与迄今为止发布的内容有所不同。
这是我要从中复制的源文件：
Google的官方海拔高度box-shadow值（SASS混合）：
//
// Copyright 2017 Google Inc. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//
@import "@material/animation/variables";
$mdc-elevation-baseline-color: black;
$mdc-elevation-umbra-opacity: .2;
$mdc-elevation-penumbra-opacity: .14;
$mdc-elevation-ambient-opacity: .12;
$mdc-elevation-umbra-map: (
0: "0px 0px 0px 0px",
1: "0px 2px 1px -1px",
2: "0px 3px 1px -2px",
3: "0px 3px 3px -2px",
4: "0px 2px 4px -1px",
5: "0px 3px 5px -1px",
6: "0px 3px 5px -1px",
7: "0px 4px 5px -2px",
8: "0px 5px 5px -3px",
9: "0px 5px 6px -3px",
10: "0px 6px 6px -3px",
11: "0px 6px 7px -4px",
12: "0px 7px 8px -4px",
13: "0px 7px 8px -4px",
14: "0px 7px 9px -4px",
15: "0px 8px 9px -5px",
16: "0px 8px 10px -5px",
17: "0px 8px 11px -5px",
18: "0px 9px 11px -5px",
19: "0px 9px 12px -6px",
20: "0px 10px 13px -6px",
21: "0px 10px 13px -6px",
22: "0px 10px 14px -6px",
23: "0px 11px 14px -7px",
24: "0px 11px 15px -7px"
);
$mdc-elevation-penumbra-map: (
0: "0px 0px 0px 0px",
1: "0px 1px 1px 0px",
2: "0px 2px 2px 0px",
3: "0px 3px 4px 0px",
4: "0px 4px 5px 0px",
5: "0px 5px 8px 0px",
6: "0px 6px 10px 0px",
7: "0px 7px 10px 1px",
8: "0px 8px 10px 1px",
9: "0px 9px 12px 1px",
10: "0px 10px 14px 1px",
11: "0px 11px 15px 1px",
12: "0px 12px 17px 2px",
13: "0px 13px 19px 2px",
14: "0px 14px 21px 2px",
15: "0px 15px 22px 2px",
16: "0px 16px 24px 2px",
17: "0px 17px 26px 2px",
18: "0px 18px 28px 2px",
19: "0px 19px 29px 2px",
20: "0px 20px 31px 3px",
21: "0px 21px 33px 3px",
22: "0px 22px 35px 3px",
23: "0px 23px 36px 3px",
24: "0px 24px 38px 3px"
);
$mdc-elevation-ambient-map: (
0: "0px 0px 0px 0px",
1: "0px 1px 3px 0px",
2: "0px 1px 5px 0px",
3: "0px 1px 8px 0px",
4: "0px 1px 10px 0px",
5: "0px 1px 14px 0px",
6: "0px 1px 18px 0px",
7: "0px 2px 16px 1px",
8: "0px 3px 14px 2px",
9: "0px 3px 16px 2px",
10: "0px 4px 18px 3px",
11: "0px 4px 20px 3px",
12: "0px 5px 22px 4px",
13: "0px 5px 24px 4px",
14: "0px 5px 26px 4px",
15: "0px 6px 28px 5px",
16: "0px 6px 30px 5px",
17: "0px 6px 32px 5px",
18: "0px 7px 34px 6px",
19: "0px 7px 36px 6px",
20: "0px 8px 38px 7px",
21: "0px 8px 40px 7px",
22: "0px 8px 42px 7px",
23: "0px 9px 44px 8px",
24: "0px 9px 46px 8px"
);
/**
* The css property used for elevation. In most cases this should not be changed. It is exposed
* as a variable for abstraction / easy use when needing to reference the property directly, for
* example in a `will-change` rule.
*/
$mdc-elevation-property: box-shadow !default;
/**
* The default duration value for elevation transitions.
*/
$mdc-elevation-transition-duration: 280ms !default;
/**
* The default easing value for elevation transitions.
*/
$mdc-elevation-transition-timing-function: $mdc-animation-standard-curve-timing-function !default;
这是我根据上述内容汇总的香草ES6 elevation函数：
const umbraColor = 'rgba(0, 0, 0, 0.2)';
const penumbraColor = 'rgba(0, 0, 0, 0.14)';
const ambientColor = 'rgba(0, 0, 0, 0.12)';
const umbra = [
"0px 0px 0px 0px",
"0px 2px 1px -1px",
"0px 3px 1px -2px",
"0px 3px 3px -2px",
"0px 2px 4px -1px",
"0px 3px 5px -1px",
"0px 3px 5px -1px",
"0px 4px 5px -2px",
"0px 5px 5px -3px",
"0px 5px 6px -3px",
"0px 6px 6px -3px",
"0px 6px 7px -4px",
"0px 7px 8px -4px",
"0px 7px 8px -4px",
"0px 7px 9px -4px",
"0px 8px 9px -5px",
"0px 8px 10px -5px",
"0px 8px 11px -5px",
"0px 9px 11px -5px",
"0px 9px 12px -6px",
"0px 10px 13px -6px",
"0px 10px 13px -6px",
"0px 10px 14px -6px",
"0px 11px 14px -7px",
"0px 11px 15px -7px"
];
const penumbra = [
"0px 0px 0px 0px",
"0px 1px 1px 0px",
"0px 2px 2px 0px",
"0px 3px 4px 0px",
"0px 4px 5px 0px",
"0px 5px 8px 0px",
"0px 6px 10px 0px",
"0px 7px 10px 1px",
"0px 8px 10px 1px",
"0px 9px 12px 1px",
"0px 10px 14px 1px",
"0px 11px 15px 1px",
"0px 12px 17px 2px",
"0px 13px 19px 2px",
"0px 14px 21px 2px",
"0px 15px 22px 2px",
"0px 16px 24px 2px",
"0px 17px 26px 2px",
"0px 18px 28px 2px",
"0px 19px 29px 2px",
"0px 20px 31px 3px",
"0px 21px 33px 3px",
"0px 22px 35px 3px",
"0px 23px 36px 3px",
"0px 24px 38px 3px"
];
const ambient = [
"0px 0px 0px 0px",
"0px 1px 3px 0px",
"0px 1px 5px 0px",
"0px 1px 8px 0px",
"0px 1px 10px 0px",
"0px 1px 14px 0px",
"0px 1px 18px 0px",
"0px 2px 16px 1px",
"0px 3px 14px 2px",
"0px 3px 16px 2px",
"0px 4px 18px 3px",
"0px 4px 20px 3px",
"0px 5px 22px 4px",
"0px 5px 24px 4px",
"0px 5px 26px 4px",
"0px 6px 28px 5px",
"0px 6px 30px 5px",
"0px 6px 32px 5px",
"0px 7px 34px 6px",
"0px 7px 36px 6px",
"0px 8px 38px 7px",
"0px 8px 40px 7px",
"0px 8px 42px 7px",
"0px 9px 44px 8px",
"0px 9px 46px 8px"
];
export default (z) => (
`
box-shadow: ${umbra[z]} ${umbraColor},
${penumbra[z]} ${penumbraColor},
${ambient[z]} ${ambientColor};
`
);
答案 4 :(得分：1)
我从Material Design Lite中获得了一些影子。我认为这段代码可能有所帮助。
.shadow--2dp {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.shadow--3dp {
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
}
.shadow--4dp {
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}
.shadow--6dp {
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
}
.shadow--8dp {
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
}
.shadow--16dp {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}
.shadow--24dp {
box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
}
答案 5 :(得分：1)
有一个为此的scss库：SCSS-Material-Shadows
这里是demo
您可以在scss文件中查看整个计算。
主要使用通过称为mdElevation()的混合。 mdElevationElement()是找到的所有here
对于高程过渡期间的动态效果，可以在您的scss中添加mdElevationTransition()。使用两个高程之间的增量作为参数。
有关详细信息，请访问github页面。
答案 6 :(得分：1)
以下JS函数接收海拔高度，并返回与Google的Material组件非常接近的结果。
export const getShadow = (elevation=1) => {
const extraEl = elevation-1
const getSize = (v1, v24) => `${v1+Math.round(((v24-v1)/23)*extraEl)}px`
const getShade = (y, blur, spread, alpha) =>
`0 ${getSize(y[0], y[1])} ${getSize(blur[0], blur[1])} ${getSize(spread[0], spread[1])} rgba(0,0,0,${alpha})`
return `box-shadow: ${getShade([2,11], [1,15], [-1,-7], 0.2)}, ${getShade([1,24], [1,38], [0,3], 0.14)}, ${getShade([1,9], [3,46], [0,8], 0.12)};`
}
const getShadow = (elevation=1) => {
const extraEl = elevation-1
const getSize = (v1, v24) => `${v1+Math.round(((v24-v1)/23)*extraEl)}px`
const getShade = (y, blur, spread, alpha) =>
`0 ${getSize(y[0], y[1])} ${getSize(blur[0], blur[1])} ${getSize(spread[0], spread[1])} rgba(0,0,0,${alpha})`
return `box-shadow: ${getShade([2,11], [1,15], [-1,-7], 0.2)}, ${getShade([1,24], [1,38], [0,3], 0.14)}, ${getShade([1,9], [3,46], [0,8], 0.12)};`
}
const appDiv = document.getElementById('app');
appDiv.innerHTML = `<div style="margin: 50px; width: 100px; height: 100px; ${getShadow(12)}">Hello world</div>`;<div id="app"></div>
它使用海拔的第一个和最后一个（第24个）水平的值。
答案 7 :(得分：0)
这是Sass稍微修改过的端口：
@mixin shadow($dp: 1) {
@if $dp == 0 { box-shadow: none; }
@else {
$blur: if($dp == 1, 3, $dp * 2);
$amba: ($dp + 11) / 100;
$diry: $dp - floor($dp / 4);
$dirb: floor(($dp + 5) / 2);
$dira: (24 - (round($dp / 10))) / 100;
box-shadow: 0px #{$dp + 'px'} #{$blur + 'px'} rgba(0, 0, 0, $amba), 0px #{$diry + 'px'} #{$dirb + 'px'} rgba(0, 0, 0, $dira);
}
}