這篇文章主要介紹了如何使用單div實(shí)現(xiàn)CSS繪圖的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇如何使用單div實(shí)現(xiàn)CSS繪圖文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

成都創(chuàng)新互聯(lián)是一家網(wǎng)站設(shè)計(jì)公司，集創(chuàng)意、互聯(lián)網(wǎng)應(yīng)用、軟件技術(shù)為一體的創(chuàng)意網(wǎng)站建設(shè)服務(wù)商，主營(yíng)產(chǎn)品：響應(yīng)式網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷推廣。我們專注企業(yè)品牌在網(wǎng)站中的整體樹(shù)立，網(wǎng)絡(luò)互動(dòng)的體驗(yàn)，以及在手機(jī)等移動(dòng)端的優(yōu)質(zhì)呈現(xiàn)。做網(wǎng)站、網(wǎng)站制作、移動(dòng)互聯(lián)產(chǎn)品、網(wǎng)絡(luò)運(yùn)營(yíng)、VI設(shè)計(jì)、云產(chǎn)品.運(yùn)維為核心業(yè)務(wù)。為用戶提供一站式解決方案，我們深知市場(chǎng)的競(jìng)爭(zhēng)激烈，認(rèn)真對(duì)待每位客戶，為客戶提供賞析悅目的作品，網(wǎng)站的價(jià)值服務(wù)。

偽元素

因?yàn)?CSS 有偽類，所以雖然只有一個(gè) Div，但實(shí)際上我可以使用三個(gè)元素。因此，使用div，div:before，div:after，我們可以這樣：

代碼如下:

div { background: red; }
div:before { background: yellow; }
div:after { background: blue; }

容易想到，這三個(gè)元素可以并排成為三個(gè)疊在一起的層。

形狀

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

我們還可以使用 CSS 創(chuàng)建其他圖形，不過(guò)大部分都可以簡(jiǎn)單組合這些基礎(chǔ)圖形來(lái)實(shí)現(xiàn)，這些簡(jiǎn)單的圖形最容易制作，也最容易修改。

多個(gè)相同的形狀

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

代碼如下:

div {
box-shadow: 170px 0 10px yellow,
330px 0 0 -20px blue,
330px 5px 5px -20px black;
}

我們甚至可以給box-shadow添加box-shadow。注意它們申明順序。再者，把它們當(dāng)做層更容易理解。

漸變

漸變通過(guò)給定一個(gè)光源，可以被用來(lái)制造明暗和深淺效果，可以讓簡(jiǎn)單扁平的圖形看起來(lái)更真實(shí)。結(jié)合多個(gè)background-image，我們可以使用很多層的漸變來(lái)實(shí)現(xiàn)更加復(fù)雜光影，甚至是更多的圖形。

代碼如下:

div {
background-image: linear-gradient(to right, gray, white, gray, black);
}
div:after {
background-image: radial-gradient(circle, yellow 50%, transparent 50%), linear-gradient(to right, blue, red); 
}

視覺(jué)

最困難的部分視覺(jué)，即如何拼湊這些形狀成為可被感知的繪圖。隨著我越來(lái)越注重繪圖的技巧，發(fā)現(xiàn)視覺(jué)這一步很重要。為了做到這一點(diǎn)，我常常凝視這主題相關(guān)的圖片，將其切割為多個(gè)可視的部分。都是一個(gè)個(gè)形狀，都是一個(gè)個(gè)顏色。我把整張圖片簡(jiǎn)化為一些小的帶顏色形狀或者區(qū)塊，我知道（大體上）如何使用 CSS 來(lái)實(shí)現(xiàn)它們。

實(shí)例

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

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

我必須實(shí)現(xiàn)下面這些點(diǎn)來(lái)捕獲真實(shí)蠟筆的感覺(jué)：

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

首先，我使用div和background顏色制作蠟筆的身體部分，從頂部到底部漸變，并使用box-shadow暗示立體感：

代碼如下:

div {
background: #237449;
background-image: linear-gradient(to bottom,
transparent 62%,
black(.3) 100%);
box-shadow: 2px 2px 3px black(.3);
}

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

代碼如下:

div {
background-image: linear-gradient(to right,
transparent 12px,
rgba(41,237,133,.6) 12px,
rgba(41,237,133,.6) 235px,
transparent 235px);
}

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

代碼如下:

div {
background-image: linear-gradient(to right,
transparent 25px,
black(.6) 25px,
black(.6) 30px,
transparent 30px,
transparent 35px,
black(.6) 35px,
black(.6) 40px,
transparent 40px,
transparent 210px,
black(.6) 210px,
black(.6) 215px,
transparent 215px,
transparent 220px,
black(.6) 220px,
black(.6) 225px,
transparent 225px);
}

紙包裝上印刷的橢圓，使用一個(gè)radial-gradient輕松搞定！

代碼如下:

div {
background-image: radial-gradient(ellipse at top,
black(.6) 50px,
transparent 54px);
}

我剛才單獨(dú)展示了各個(gè)部分，不過(guò)別忘了background-image看起來(lái)是這樣的：

代碼如下:

div {
// ellipse printed on wrapper
background-image: radial-gradient(ellipse at top,
black(.6) 50px,
transparent 54px),
// printed stripes
linear-gradient(to right,
transparent 25px,
black(.6) 25px,
black(.6) 30px,
transparent 30px,
transparent 35px,
black(.6) 35px,
black(.6) 40px,
transparent 40px,
transparent 210px,
black(.6) 210px,
black(.6) 215px,
transparent 215px,
transparent 220px,
black(.6) 220px,
black(.6) 225px,
transparent 225px),
// wrapper
linear-gradient(to right,
transparent 12px,
rgba(41,237,133,.6) 12px,
rgba(41,237,133,.6) 235px,
transparent 235px),
// crayon body shading
linear-gradient(to bottom,
transparent 62%,
black(.3) 100%)
}

完成了div，我們把注意力轉(zhuǎn)移到:before偽類元素上，創(chuàng)建蠟筆的筆頭。使用實(shí)心和透明的邊框，我制作了一個(gè)三角形，把它和我之前繪制的div放到一起。

代碼如下:

div:before {
height: 10px;
border-right: 48px solid #237449;
border-bottom: 13px solid transparent;
border-top: 13px solid transparent;
}

比起蠟筆筆桿，筆頭看起來(lái)有點(diǎn)平，我們可以使用:after偽類元素來(lái)修復(fù)這個(gè)問(wèn)題。我添加一個(gè)從頂部到底部的linear-gradient，制作了一個(gè)反光效果，貫穿整只蠟筆。

代碼如下:

div:after {
background-image: linear-gradient(to bottom,
white(0) 12px,
white(.2) 17px,
white(.2) 19px,
white(0) 24px);
}

這給那個(gè)扁平的三角形添加更多的層次感，更加真實(shí)。制作接近尾聲，我給:after添加一些文字，定位，使得看起來(lái)像是印刷在蠟筆包裝上的一樣。

代碼如下:

div:after {
content: 'green';
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: bold;
color: black(.3);
text-align: right;
padding-right: 47px;
padding-top: 17px;
}

大功告成！

另外一個(gè)實(shí)例

蠟筆作為一個(gè)不錯(cuò)的例子，很好地展示了如何使用background-image和gradient來(lái)產(chǎn)生真實(shí)的效果。下面這個(gè)例子將展示多個(gè)box-shadow的強(qiáng)大之處：?jiǎn)?code>div的照相機(jī)。

這是照相機(jī)的主體部分，使用background-image和border-image制作的

代碼如下:

div:before {
background: #333;
box-shadow: 0 0 0 2px #eee,
-1px -1px 1px 3px #333,
-95px 6px 0 0 #ccc,
30px 3px 0 12px #ccc,
-18px 37px 0 46px #ccc,
-96px -6px 0 -6px #555,
-96px -9px 0 -6px #ddd,
-155px -10px 1px 3px #888,
-165px -10px 1px 3px #999,
-170px -10px 1px 3px #666,
-162px -8px 0 5px #555,
85px -4px 1px -3px #ccc,
79px -4px 1px -3px #888,
82px 1px 0 -4px #555;
}

類似的，下面是:after（灰色的圓）以及使用它的box-shadow制作的幾個(gè)細(xì)節(jié)部分。

代碼如下:

div:after {
background: linear-gradient(45deg, #ccc 40%, #ddd 100%);
border-radius: 50%;
box-shadow: 0 3px 2px #999,
1px -2px 0 white,
-1px -3px 2px #555,
0 0 0 15px #c2c2c2,
0 -2px 0 15px white,
-2px -5px 1px 17px #666,
0 10px 10px 15px black(.3),
-90px -51px 1px -43px #aaa,
-90px -50px 1px -40px #888,
-90px -51px 0 -34px #ccc,
-90px -50px 0 -30px #aaa,
-90px -48px 1px -28px black(.2),
-124px -73px 1px -48px #eee,
-125px -72px 0 -46px #666,
-85px -73px 1px -48px #eee,
-86px -72px 0 -46px #666,
42px -82px 1px -48px #eee,
41px -81px 0 -46px #777,
67px -73px 1px -48px #eee,
66px -72px 0 -46px #666,
-46px -86px 1px -45px #444,
-44px -87px 0 -38px #333,
-44px -86px 0 -37px #ccc,
-44px -85px 0 -34px #999,
14px -89px 1px -48px #eee,
12px -84px 1px -48px #999,
23px -85px 0 -47px #444,
23px -87px 0 -46px #888;
}

有點(diǎn)瘋狂？不過(guò)你看到了吧， 多個(gè)box-shadow確實(shí)可以給使用單個(gè)div繪圖添加很多細(xì)節(jié)部分。

最大的挑戰(zhàn)

我碰到了兩個(gè)最大的挑戰(zhàn)，三角形的限制和gradient獨(dú)特的行為。

三角形的問(wèn)題

因?yàn)槿切问鞘褂?code>border創(chuàng)建的，這極大地限制了我對(duì)它的利用。使用border-image給border添加gradient，不能單獨(dú)添加其中一邊。無(wú)法給border創(chuàng)建出來(lái)的三角形添加box-shadow，因?yàn)?code>box-shadow是添加在盒模型上的。因此要?jiǎng)?chuàng)建多個(gè)三角形就會(huì)很困難。看起來(lái)就是下面這樣：

代碼如下:

div {
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 80px solid red;
}
div:before {
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 80px solid red;
border-image: linear-gradient(to right, red, blue);
}
div:after {
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 80px solid red;
box-shadow: 5px 5px 5px gray;
}

多層漸變

漸變的行為就是會(huì)填滿整個(gè)background。在堆疊多個(gè)gradient的時(shí)候就顯得很講技巧。需要花費(fèi)額外的時(shí)間思考透明度、z-index這些事，還要搞清楚什么要可見(jiàn)，什么不要。不過(guò)若能有效地使用gradient，我們的繪圖可以包含很多令人驚嘆的細(xì)節(jié)。

Tardis 就是一個(gè)很好的例子，顯示或隱藏漸變，創(chuàng)建了一張細(xì)節(jié)極強(qiáng)的圖片。下圖顯示的是繪制的中間過(guò)程，可以看到數(shù)個(gè)從頂部到底部的漸變，寬度填滿整個(gè)容器。

使用從左到右和從右到左的gradient，我可以遮住一部分漸變，同時(shí)把其他部分漸變顯示出來(lái)。

最終的結(jié)果看上去包含了很多圖形來(lái)構(gòu)成 Tardis 的前面，但實(shí)際上它就是層疊的linear-gradient。很多時(shí)候不得不偽造呀。

動(dòng)態(tài)地查看它們

源于這個(gè)項(xiàng)目，有一個(gè)非?？岱浅Ｓ杏玫暮脰|西突然出現(xiàn)，那就是 Rafael Carício（@rafaelcaricio） 開(kāi)發(fā)的名為CSS Gradient Inspector的 Chrome 瀏覽器插件。這個(gè)開(kāi)發(fā)工具可以探測(cè)且可以開(kāi)關(guān)元素上的每一個(gè) gradient，看起來(lái)就像開(kāi)關(guān)一個(gè)個(gè)層。（它在日常項(xiàng)目中也非常有用。）

關(guān)于“如何使用單div實(shí)現(xiàn)CSS繪圖”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“如何使用單div實(shí)現(xiàn)CSS繪圖”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。