资源– 阴影

阴影

阴影提供了关于材质深度和运动方向的重要视觉线索。材质的海拔高度决定了其阴影的外观。有关 Material Design 中海拔高度和阴影的说明，请参阅设计指南中的阴影和海拔高度指南。

有关 Android 或 Polymer 中阴影的开发文档：

Material Design Android 图标
定义阴影和裁剪视图

阴影由父元素绘制和裁剪

Material Design Polymer 图标
纸片阴影

阴影分两层渲染，以产生更真实的效果

Sketch Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Sketch 中的 Material 海拔高度

右侧表格是 Sketch 的阴影值列表。

Material Design 下载图标
Sketch 中的阴影
0.07 MB (.sketch)

1dp 海拔高度

主阴影

环境阴影

本影

半影

不透明度：

14

12

20

X：

0

0

0

Y：

0

2

1

模糊：

2

2

3

扩展：

0

0

0

2dp 海拔高度

主阴影

环境阴影

本影

半影

不透明度：

14

12

20

X：

0

0

0

Y：

0

3

1

模糊：

4

4

5

扩展：

0

0

0

3dp 海拔高度

主阴影

环境阴影

本影

半影

不透明度：

14

12

20

X：

0

0

0

Y：

3

3

1

模糊：

3

4

8

扩展：

0

0

0

4dp 海拔高度

主阴影

环境阴影

本影

半影

不透明度：

14

12

20

X：

0

0

0

Y：

2

4

1

模糊：

4

5

10

扩展：

0

0

0

6dp 海拔高度

主阴影

环境阴影

本影

半影

不透明度：

14

12

20

X：

0

0

0

Y：

6

1

3

模糊：

10

18

5

扩展：

0

0

0

8dp 海拔高度

主阴影

环境阴影

本影

半影

不透明度：

14

12

20

X：

0

0

0

Y：

8

3

4

模糊：

10

14

15

扩展：

1

3

0

9dp 海拔高度

主阴影

环境阴影

本影

半影

不透明度：

14

12

20

X：

0

0

0

Y：

9

3

5

模糊：

12

16

6

扩展：

1

2

0

12dp 海拔高度

主阴影

环境阴影

本影

半影

不透明度：

14

12

20

X：

0

0

0

Y：

12

5

7

模糊：

17

22

8

扩展：

2

4

0

16dp 海拔高度

主阴影

环境阴影

本影

半影

不透明度：

14

12

20

X：

0

0

0

Y：

16

6

8

模糊：

24

30

10

扩展：

2

5

0

24dp 海拔高度

主阴影

环境阴影

本影

半影

不透明度：

14

12

20

X：

0

0

0

Y：

24

9

11

模糊：

38

46

15

扩展：

3

8

0

Illustrator Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Illustrator 中的 Material 海拔高度

右侧表格是 Illustrator 的阴影值列表。

Material Design 下载图标
Illustrator 中的阴影
1.65 MB (.ai)

1dp 海拔高度

主阴影

环境阴影

不透明度：

26%

8%

X：

0

0

Y：

.92

0

模糊：

.5

.67

2dp 海拔高度

主阴影

环境阴影

不透明度：

26%

8%

X：

0

0

Y：

1.83

0

模糊：

1

1.33

3dp 海拔高度

主阴影

环境阴影

不透明度：

26%

8%

X：

0

0

Y：

2.75

0

模糊：

1.5

2

4dp 海拔高度

主阴影

环境阴影

不透明度：

26%

8%

X：

0

0

Y：

3.67

0

模糊：

2

2.67

6dp 海拔高度

主阴影

环境阴影

不透明度：

26%

8%

X：

0

0

Y：

5.5

0

模糊：

3

4

8dp 海拔高度

主阴影

环境阴影

不透明度：

26%

8%

X：

0

0

Y：

7.33

0

模糊：

4

5.33

9dp 海拔高度

主阴影

环境阴影

不透明度：

26%

8%

X：

0

0

Y：

8.25

0

模糊：

4.5

6

12dp 海拔高度

主阴影

环境阴影

不透明度：

26%

8%

X：

0

0

Y：

11

0

模糊：

6

8

16dp 海拔高度

主阴影

环境阴影

不透明度：

26%

8%

X：

0

0

Y：

14.67

0

模糊：

8

10.67

24dp 海拔高度

主阴影

环境阴影

不透明度：

26%

8%

X：

0

0

Y：

22

0

模糊：

12

16

Photoshop Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Photoshop 中的 Material 海拔高度

右侧表格是 Photoshop 的阴影值列表。

Material Design 下载图标
Photoshop 中的阴影
1.09 MB (.psd)

1dp 海拔高度

主阴影

环境阴影

不透明度：

24%

16%

角度：

90

90

距离：

2

1

扩展：

6

2

尺寸：

3

4

2dp 海拔高度

主阴影

环境阴影

不透明度：

24%

16%

角度：

90

90

距离：

3

1

扩展：

6

2

尺寸：

5

7

3dp 海拔高度

主阴影

环境阴影

不透明度：

24%

16%

角度：

90

90

距离：

5

2

扩展：

6

2

尺寸：

7

10

4dp 海拔高度

主阴影

环境阴影

不透明度：

24%

16%

角度：

90

90

距离：

7

3

扩展：

6

2

尺寸：

10

13

6dp 海拔高度

主阴影

环境阴影

不透明度：

24%

16%

角度：

90

90

距离：

10

4

扩展：

6

2

尺寸：

15

20

8dp 海拔高度

主阴影

环境阴影

不透明度：

24%

16%

角度：

90

90

距离：

13

5

扩展：

6

2

尺寸：

20

27

9dp 海拔高度

主阴影

环境阴影

不透明度：

24%

16%

角度：

90

90

距离：

18

9

扩展：

6

2

尺寸：

27

36

12dp 海拔高度

主阴影

环境阴影

不透明度：

24%

16%

角度：

90

90

距离：

20

8

扩展：

6

2

尺寸：

30

41

16dp 海拔高度

主阴影

环境阴影

不透明度：

24%

16%

角度：

90

90

距离：

28

11

扩展：

6

2

尺寸：

40

53

24dp 海拔高度

主阴影

环境阴影

不透明度：

24%

16%

角度：

90

90

距离：

39

15

扩展：

6

2

尺寸：

60

81