用單div實現(xiàn)CSS繪圖方法

本文格式為Word版，下載可任意編輯——用單div實現(xiàn)CSS繪圖方法用單p實現(xiàn)CSS繪圖方法

2021年5月，我加入了CSSConf，看到了LeaVerou關(guān)于border-radius的演講，你可能會認(rèn)為這個屬性很不起眼。但是這個演講讓我大開眼界，熟悉到CSS還有好多行為我是不了解的?；貞浧鹞疫€是藝術(shù)生的那段時光，不斷地推動著我成為所選媒介的專家。作為一個Web設(shè)計師，CSS是我的媒介，因此我盡我所能地學(xué)習(xí)，探索它的極限。

為什么只有一個p?

回憶我以前學(xué)畫的時候，課堂上還做了混合顏色的測驗，我們就使用三原色，紅、黃、藍(lán)，創(chuàng)造出了其他顏色的光譜。這個測驗的目的是讓我們了解顏色的特性，同時這種限制也讓我們明白了混合的氣力。你當(dāng)然可以買一只綠色的筆，但是你也可以使用藍(lán)色和黃色把綠色做出來。限制你的可選項，會讓你重新評估手頭上已有的工具。

我抉擇開頭一個使用CSS繪畫的工程，過段時間我就會給出一個只用CSS繪制的新東西。為了得到更大的挑戰(zhàn)，探索CSS的潛力，我給自己定了這個限制，只是用一個p。不能直接買一只綠色的筆添加更多的p，我要做的就是盡其所能地結(jié)合CSS屬性來實現(xiàn)我的目的。

工具箱

一個p加上欣賞器支持的那些CSS屬性，看起來可用的工具太少了。但是我察覺問題不在于你在使用多少東西，而在于你如何對付你在使用的東西。

偽元素

由于CSS有偽類，所以雖然只有一個p，但實際上我可以使用三個元素。因此，使用p，p:before，p:after，我們可以這樣：

使用單p實現(xiàn)CSS繪圖方法匯總?cè)?lián)

復(fù)制代碼

代碼如下:

pbackground:red;

p:beforebackground:yellow;

p:afterbackground:blue;

輕易想到，這三個元素可以并排成為三個疊在一起的層。因此，在我的腦海中，它看起來是下面這樣的：

外形

使用CSS和單個元素，我們可以制作三種根基圖形。使用width和height屬性制作正方形/矩形，使用border-radius制作圓/橢圓，使用border制作三角形/梯形。

我們還可以使用CSS創(chuàng)造其他圖形，不過大片面都可以簡樸組合這些根基圖形來實現(xiàn)，這些簡樸的圖形最輕易制作，也最輕易修改。

多個一致的外形

使用疊加的box-shadow，我們可以創(chuàng)造多個一致的外形，這些外形可以擁有不一樣的大小、顏色和模糊效果。我們可以在x或者y軸上移動這些圖形，因此幾乎可以繪制無限的圖形。

復(fù)制代碼

代碼如下:

p

box-shadow:170px010pxyellow,

330px00-20pxblue,

330px5px5px-20pxblack;

我們甚至可以給box-shadow添加box-shadow。留神它們申明依次。再者，把它們當(dāng)做層更輕易理解。

漸變

漸變通過給定一個光源，可以被用來制造明暗和深淺效果，可以讓簡樸扁平的圖形看起來更真實。結(jié)合多個background-image，我們可以使用好多層的漸變來實現(xiàn)更加繁雜光影，甚至是更多的圖形。

復(fù)制代碼

代碼如下:

p

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

p:after

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

視覺

最困難的片面視覺，即如何拼湊這些外形成為可被感知的繪圖。隨著我越來越提防繪圖的技巧，察覺視覺這一步很重要。為了做到這一點，我往往端詳這主題相關(guān)的圖片，將其切割為多個可視的'片面。都是一個個外形，都是一個個顏色。我把整張圖片簡化為一些小的帶顏色外形或者區(qū)塊，我知道大體上如何使用CSS來實現(xiàn)它們。

實例

我們一起留心看看兩個繪圖，并學(xué)習(xí)如何分解成不同的區(qū)塊，合成一個大的圖形。第一個就是一支綠色的蠟筆。

蠟筆由兩個根基圖形構(gòu)成：矩形的筆身和三角形的筆尖。

我務(wù)必實現(xiàn)下面這些點來捕獲真實蠟筆的感覺：

紙質(zhì)包裝上不同的顏色印刷在包裝上的外形和文字條紋示意蠟筆是圓的明暗效果，示意圓形的蠟筆和光源

首先，我使用p和background顏色制作蠟筆的身體片面，從頂部畢竟部漸變，并使用box-shadow示意立體感：

復(fù)制代碼

代碼如下:

p

background:#237449;

background-image:linear-gradienttobottom,

transparent62%,

black.3100%;

box-shadow:2px2px3pxblack.3;

然后，我使用一個從左到右的linear-gradient制作紙包裝。alpha值為.6，這樣的之前的漸變可以透出來。

復(fù)制代碼

代碼如下:

p

background-image:linear-gradienttoright,

transparent12px,

rgba41,237,133,.612px,

rgba41,237,133,.6235px,

transparent235px;

接下來，我持續(xù)使用同樣的方式，從左到右漸變，制作蠟筆上的條紋。

復(fù)制代碼

代碼如下:

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輕松搞定!

復(fù)制代碼

代碼如下:

p

background-image:radial-gradientellipseattop,

black.650px,

transparent54px;

我方才單獨表示了各個片面，不過別忘了background-image看起來是這樣的：

復(fù)制代碼

代碼如下:

p

//ellipseprintedonwrapper