使用单div实现CSS 绘图方法汇总

z-index

这些事，还要搞清楚什么要可见，什么不要。不过若能有效地使用

gradien

t，我们的绘图可以包含很多令人惊叹的细节。

Tardis 就是一个很好的例子，显示或隐藏渐变，创建了一张细节极强的图片。下图显示的是绘制的中间过程，可以看到数个从顶部到底部的渐变，宽度填满整个容器。

使用从左到右和从右到左的

gradient

，我可以遮住一部分渐变，同时把其他部分渐变显示出来。

最终的结果看上去包含了很多图形来构成 Tardis 的前面，但实际上它就是层叠的

linear-gradient

。很多时候不得不伪造呀。

动态地查看它们

源于这个项目，有一个非常酷非常有用的好东西突然出现，那就是 Rafael Carício（@rafaelcaricio） 开发的名为CSS Gradient Inspector的 Chrome 浏览器插件。这个开发工具可以探测且可以开关元素上的每一个 gradient，看起来就像开关一个个层。（它在日常项目中也非常有用。）

我希望设计师和开发者使用动画或者 JavaScript 的功能来做类似的尝试，或者对这些绘画做一些变形。你可以到http://div.justjavac.com或者GitHub上把玩一下这些 CSS。