用纯CSS画一个类似于素描的杯子
完成图如下：
杯子完成图
想直接看源码，可以上我的github上面去看，下面开始具体说实现步骤。
首先，用到了哪些知识：
box-shadowCSS径向渐变，多层渐变-
绝对定位，z-index border-radius
知识点需要掌握的并不多，要求也不高，下面说一下我的实现思路。
第零步，肯定是分析图，然后写html了。杯子图组成并不复杂，就四个部分，杯子的把手，杯托，杯子的身体，杯子的径口（原谅我词穷，差不多就是这个意思）。
就可以差不多写出这样的html：
<div id="cup_header"></div>
<div id="cup_body"></div>
<div id="cup_footer"></div>
<div id="cup_ear"></div>
第一步，决定布局，我一开始想的并不是固定像素，而是百分比，可以拉伸的，杯子可以跟着变大缩小的那种。后来想了一下，没必要，就固定大小算了。然后把杯子用absolute定位，绝对居中在屏幕中间，用margin进行微调，运用z-index，遮罩，差不多就成了这个样子：
第一步
杯子的模型就差不多勾勒出来了！
第二步，用
border-radius让它看起来真的是个杯子，然后就变成了下图：
第二步
差不多就是个杯子了，然后我们要开始上色，这是个细致活，而且要模仿类似于素描那种，有阴影，有变化。
下面我介绍一下box-shadow和CSS径向渐变，多层渐变。
两者相比，大家应该对box-shadow更加熟悉一些。那我就先说一下box-shadow吧。
其实我之前的文章就有提到过box-shadow，它可以无限叠加，有inset，inset的意思就是说，可以向盒子内部投影，所以，我杯子的边缘描边都是用的box-shadow的inset实现的。
然后是CSS径向渐变，多层渐变，
background-image: radial-gradient(farthest-corner ellipse at 40% 40%, #ffffff 20%, #DFDFDF 70%, #eeeeee 80%);
上述代码就是他的实现，具体功能参数，网上一大堆，这里就不说了。通过一系列的微调，组合。就完成杯子了。
杯子完成图
