阴影是建立层级、空间和可点击感的快速方式。下面整理了 12 组可以直接试用的阴影, 从轻微边界到明显的层叠效果都有。
阴影 01
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);阴影 02
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);阴影 03
box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.2);阴影 04
box-shadow: 0 80px 50px -30px rgba(0, 0, 0, 0.15);阴影 05
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15);阴影 06
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);阴影 07
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.2);阴影 08
box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);阴影 09
box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.05);阴影 10
box-shadow: 0 0 0 2px #000000;阴影 11
box-shadow: 8px 8px 0 #000000;阴影 12
box-shadow: -10px 10px 0 #212121, -20px 20px 0 rgba(33, 33, 33, 0.7), -30px 30px 0 rgba(33, 33, 33, 0.4), -40px 40px 0 rgba(33, 33, 33, 0.1);