使用叠加的
box-shadow，我们可以创建多个相同的形状，这些形状可以拥有不一样的大小、颜色和模糊效果。我们可以在x或者y轴上移动这些图形，因此几乎可以绘制无限的图形。
复制代码
div {
box-shadow: 170px 0 10px yellow,
330px 0 0 -20px blue,
330px 5px 5px -20px black;
}
我们甚至可以给
box-shadow添加
box-shadow。注意它们申明顺序。再者，把它们当做层更容易理解。渐变
渐变通过给定一个光源，可以被用来制造明暗和深浅效果，可以让简单扁平的图形看起来更真实。结合多个
background-image，我们可以使用很多层的渐变来实现更加复杂光影，甚至是更多的图形。
复制代码
div {
background-image: linear-gradient(to right, gray, white, gray, black);
}
div:after {
background-image: radial-gradient(circle, yellow 50%, transparent 50%), linear-gradient(to right, blue, red);
}
视觉
最困难的部分视觉，即如何拼凑这些形状成为可被感知的绘图。随着我越来越注重绘图的技巧，发现视觉这一步很重要。为了做到这一点，我常常凝视这主题相关的图片，将其切割为多个可视的部分。都是一个个形状，都是一个个颜色。我把整张图片简化为一些小的带颜色形状或者区块，我知道（大体上）如何使用 CSS 来实现它们。
实例
我们一起仔细看看两个绘图，并学习如何分解成不同的区块，合成一个大的图形。第一个就是一支绿色的蜡笔。
蜡笔由两个基础图形构成：矩形的笔身和三角形的笔尖。
我必须实现下面这些点来捕获真实蜡笔的感觉：
纸质包装上不同的颜色印刷在包装上的形状和文字条纹暗示蜡笔是圆的明暗效果，暗示圆形的蜡笔和光源
首先，我使用
div和
background颜色制作蜡笔的身体部分，从顶部到底部渐变，并使用
box-shadow暗示立体感：
复制代码
div {
background: #237449;
background-image: linear-gradient(to bottom,
transparent 62%,
black(.3) 100%);
box-shadow: 2px 2px 3px black(.3);
}
然后，我使用一个从左到右的
