CSS 实战！画一个素描杯子

---

用纯CSS画一个类似于素描的杯子

---

完成图如下：

杯子完成图
想直接看源码，可以上我的github上面去看，下面开始具体说实现步骤。
首先，用到了哪些知识：

• box-shadow
• CSS径向渐变，多层渐变
• 绝对定位，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%);

上述代码就是他的实现，具体功能参数，网上一大堆，这里就不说了。通过一系列的微调，组合。就完成杯子了。

杯子完成图