Material Design 中,若一层 material 压在另两层 materials 的交界处,只在最下一层投影吗

Material Design 中, Material 在两层 Material 交界处投影, 会将投影投在下方两层 Material 上. 在 Do 图中, Floating Action Button 同时在蓝色 App Bar 和白色背景上投影, 只是在蓝色 App Bar 上的投影部分看得不是很清楚. FAB 的投影扩散更大, 离本体更远, 暗示 FAB 比 App Bar 浮起更多, 层级更高.
■网友
这个效果应该并不难。引用规范中的几张图:Material Design 中,若一层 material 压在另两层 materials 的交界处,只在最下一层投影吗

Material Design 中,若一层 material 压在另两层 materials 的交界处,只在最下一层投影吗

【Material Design 中,若一层 material 压在另两层 materials 的交界处,只在最下一层投影吗】 Material Design 中,若一层 material 压在另两层 materials 的交界处,只在最下一层投影吗

Material Design 中,若一层 material 压在另两层 materials 的交界处,只在最下一层投影吗

Material Design 中,若一层 material 压在另两层 materials 的交界处,只在最下一层投影吗

Material Design 中,若一层 material 压在另两层 materials 的交界处,只在最下一层投影吗

Material Design 中,若一层 material 压在另两层 materials 的交界处,只在最下一层投影吗

Material Design 中,若一层 material 压在另两层 materials 的交界处,只在最下一层投影吗

Material Design 中,若一层 material 压在另两层 materials 的交界处,只在最下一层投影吗

Material Design 中,若一层 material 压在另两层 materials 的交界处,只在最下一层投影吗

Material Design 中,若一层 material 压在另两层 materials 的交界处,只在最下一层投影吗

Material Design 中,若一层 material 压在另两层 materials 的交界处,只在最下一层投影吗

你可以根据上面的参数配合box-shadow完成需要的效果。box-shadow的参数都配在那了。如果你不了解box-shadow可以参考:http://www.w3cplus.com/content/css3-box-shadow
■网友
事实上只是灯光从上方照来,下方的阴影更明显而已。
■网友
这个在原生平板上体现最明显了,多个应用同时弹出安装窗口,那阴影,相当浓厚。回家了截图。------------------------------------------至于为什么?我觉得系统内给每层元素分别安排了虚拟光源,所以都有自己的投影,而不像全局投影那样整台手机一个虚拟光源。貌似全局投影运算量太大吧?其实可以这么想:每层元素是自带阴影,就像自己的黑色蕾丝边一样,并没有投射到下层材质上,只是视觉上的投影。Material Design 中,若一层 material 压在另两层 materials 的交界处,只在最下一层投影吗

Material Design 中,若一层 material 压在另两层 materials 的交界处,只在最下一层投影吗


■网友
Z的数值唯一影响投影效果,你以为真的会根据层次去做实时投影?那不比小米还卡?


    推荐阅读