为什么只使用一个 Div？

 

2013年5月，我参加了 CSSConf，看到了Lea Verou 关于 border-radius 的演讲，你可能会认为这个属性很不起眼。但是这个演讲让我大开眼界，认识到 CSS 还有很多行为我是不了解的。回忆起我还是艺术生的那段时光，不断地推动着我成为所选媒介的专家。作为一个 Web 设计师，CSS 是我的媒介，因此我尽我所能地学习，探索它的极限。

 

为什么只有一个 Div？

 

回忆我以前学画的时候，课堂上还做了混合颜色的实验，我们就使用三原色，红、黄、蓝，创造出了其他颜色的光谱。这个实验的目的是让我们了解颜色的特性，同时这种限制也让我们明白了混合的力量。你当然可以买一只绿色的笔，但是你也可以使用蓝色和黄色把绿色做出来。限制你的可选项，会让你重新评估手头上已有的工具。

 

我决定开始一个使用 CSS 绘画的项目，过段时间我就会给出一个只用 CSS 绘制的新东西。为了得到更大的挑战，探索 CSS 的潜力，我给自己定了这个限制，只是用一个 Div。不能直接买一只绿色的笔（添加更多的 Div），我要做的就是尽其所能地结合 CSS 属性来实现我的目的。

 

工具箱

 

一个 Div 加上浏览器支持的那些 CSS 属性，看起来可用的工具太少了。但是我发现问题不在于你在使用多少东西，而在于你如何看待你在使用的东西。

 

伪元素

 

因为 CSS 有伪类，所以虽然只有一个 Div，但实际上我可以使用三个元素。因此，使用 div，div:before，div:after，我们可以这样：

 

div { background: red; }

 

div:before { background: yellow; }

 

div:after { background: blue; }

 

容易想到，这三个元素可以并排成为三个叠在一起的层。因此，在我的脑海中，它看起来是下面这样的：

 

形状

 

使用 CSS 和单个元素，我们可以制作三种基础图形。使用 width 和 height 属性制作正方形/矩形，使用 border-radius 制作圆/椭圆，使用 border 制作三角形/梯形。

 

我们还可以使用 CSS 创建其他图形，不过大部分都可以简单组合这些基础图形来实现，这些简单的图形最容易制作，也最容易修改。

 

多个相同的形状

 

使用叠加的 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，我们可以使用很多层的渐变来实现更加复杂光影，甚至是更多的图形。