用单div实现CSS绘图方法

本文格式为Word版，下载可任意编辑——用单div实现CSS绘图方法用单p实现CSS绘图方法

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

为什么只有一个p?

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

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

工具箱

一个p加上欣赏器支持的那些CSS属性，看起来可用的工具太少了。但是我察觉问题不在于你在使用多少东西，而在于你如何对付你在使用的东西。

伪元素

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

使用单p实现CSS绘图方法汇总三联

复制代码

代码如下:

pbackground:red;

p:beforebackground:yellow;

p:afterbackground:blue;

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

外形

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

我们还可以使用CSS创造其他图形，不过大片面都可以简朴组合这些根基图形来实现，这些简朴的图形最轻易制作，也最轻易修改。

多个一致的外形

使用叠加的box-shadow，我们可以创造多个一致的外形，这些外形可以拥有不一样的大小、颜色和模糊效果。我们可以在x或者y轴上移动这些图形，因此几乎可以绘制无限的图形。

复制代码

代码如下:

p

box-shadow:170px010pxyellow,

330px00-20pxblue,

330px5px5px-20pxblack;

我们甚至可以给box-shadow添加box-shadow。留神它们申明依次。再者，把它们当做层更轻易理解。

渐变

渐变通过给定一个光源，可以被用来制造明暗和深浅效果，可以让简朴扁平的图形看起来更真实。结合多个background-image，我们可以使用好多层的渐变来实现更加繁杂光影，甚至是更多的图形。

复制代码

代码如下:

p

background-image:linear-gradienttoright,gray,white,gray,black;

p:after

background-image:radial-gradientcircle,yellow50%,transparent50%,linear-gradienttoright,blue,red;

视觉

最困难的片面视觉，即如何拼凑这些外形成为可被感知的绘图。随着我越来越提防绘图的技巧，察觉视觉这一步很重要。为了做到这一点，我往往端详这主题相关的图片，将其切割为多个可视的'片面。都是一个个外形，都是一个个颜色。我把整张图片简化为一些小的带颜色外形或者区块，我知道大体上如何使用CSS来实现它们。

实例

我们一起留心看看两个绘图，并学习如何分解成不同的区块，合成一个大的图形。第一个就是一支绿色的蜡笔。

蜡笔由两个根基图形构成：矩形的笔身和三角形的笔尖。

我务必实现下面这些点来捕获真实蜡笔的感觉：

纸质包装上不同的颜色印刷在包装上的外形和文字条纹示意蜡笔是圆的明暗效果，示意圆形的蜡笔和光源

首先，我使用p和background颜色制作蜡笔的身体片面，从顶部毕竟部渐变，并使用box-shadow示意立体感：

复制代码

代码如下:

p

background:#237449;

background-image:linear-gradienttobottom,

transparent62%,

black.3100%;

box-shadow:2px2px3pxblack.3;

然后，我使用一个从左到右的linear-gradient制作纸包装。alpha值为.6，这样的之前的渐变可以透出来。

复制代码

代码如下:

p

background-image:linear-gradienttoright,

transparent12px,

rgba41,237,133,.612px,

rgba41,237,133,.6235px,

transparent235px;

接下来，我持续使用同样的方式，从左到右渐变，制作蜡笔上的条纹。

复制代码

代码如下:

p

background-image:linear-gradienttoright,

transparent25px,

black.625px,

black.630px,

transparent30px,

transparent35px,

black.635px,

black.640px,

transparent40px,

transparent210px,

black.6210px,

black.6215px,

transparent215px,

transparent220px,

black.6220px,

black.6225px,

transparent225px;

纸包装上印刷的椭圆，使用一个radial-gradient轻松搞定!

复制代码

代码如下:

p

background-image:radial-gradientellipseattop,

black.650px,

transparent54px;

我方才单独表示了各个片面，不过别忘了background-image看起来是这样的：

复制代码

代码如下:

p

//ellipseprintedonwrapper