點(diǎn)擊下載
本文文檔

當(dāng)前位置：首頁(yè) - 科技 - 知識(shí)百科 - 正文

div+css3繪制基本圖形-白色的海

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 16:44:24

div+css3繪制基本圖形-白色的海

div+css3繪制基本圖形-白色的海:基本圖形包括：矩形、圓角矩形、圓形、橢圓形、三角形、值線、弧這些圖形的繪制用到了CSS圓角屬性，不考慮IE8。下面的實(shí)現(xiàn)在chrome瀏覽器運(yùn)行通過(guò)。 1.矩形比較簡(jiǎn)單，通過(guò)CSS設(shè)置寬度、高度、背景色即可。 html: div class=rectangle

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀div+css3繪制基本圖形-白色的海:基本圖形包括：矩形、圓角矩形、圓形、橢圓形、三角形、值線、弧這些圖形的繪制用到了CSS圓角屬性，不考慮IE8。下面的實(shí)現(xiàn)在chrome瀏覽器運(yùn)行通過(guò)。 1.矩形比較簡(jiǎn)單，通過(guò)CSS設(shè)置寬度、高度、背景色即可。 html: div class=rectangle

基本圖形包括：矩形、圓角矩形、圓形、橢圓形、三角形、值線、弧

這些圖形的繪制用到了CSS圓角屬性，不考慮IE8。

下面的實(shí)現(xiàn)在chrome瀏覽器運(yùn)行通過(guò)。

1.矩形

比較簡(jiǎn)單，通過(guò)CSS設(shè)置寬度、高度、背景色即可。

html:

css:

 .rectangle {
 width: 150px;
 height: 100px;
 background-color: orangered;
 }

呈現(xiàn)：

2.圓角矩形

在矩形設(shè)置的基礎(chǔ)上，增加圓角屬性設(shè)定，這里用的單位是百分比,好處是可適應(yīng)整體大小的變化而變化。

html:

css:

 .rounded-rectangle {
 width: 150px;
 height: 100px;
 background-color: orangered;
 border-radius: 10%;
 }

呈現(xiàn):

3.圓

設(shè)置為正方形，將圓角設(shè)成50%即可，其實(shí)就是圓角的半徑為正方形的的半徑。

html:

css:

 .circle {
 width: 100px;
 height: 100px;
 background-color: orangered;
 border-radius: 50%;
 }

呈現(xiàn):

4.橢圓

在圓形的基礎(chǔ)上，將正方形設(shè)置成矩形即可。

html:

css:

 .ellipse {
 width: 150px;
 height: 100px;
 background-color: orangered;
 border-radius: 50%;
 }

呈現(xiàn):

5.三角形

乍一看三角形這個(gè)樣子，還真是無(wú)從下手，沒(méi)有什么現(xiàn)成的方法一步到位的完成，繪制它需要用到border的特性，這個(gè)很有意思。

html:

分解1：

現(xiàn)在我們來(lái)看一下有趣的border，做一個(gè)正方形，寬高都設(shè)成100px，設(shè)定四個(gè)邊的border的寬度為10px，每條邊設(shè)置不同的顏色。

 .triangle{
 width: 100px;
 height: 100px;
 border-style: solid;
 background-color: orangered;
 border-top-color: red;
 border-right-color: green;
 border-bottom-color: blue;
 border-left-color:blueviolet;
 border-top-width: 10px;
 border-bottom-width: 10px;
 border-left-width: 10px;
 border-right-width: 10px;
 }

呈現(xiàn)后發(fā)現(xiàn)很有意思，兩條border邊的交界處是斜角邊，

分解2：

繼續(xù)，將各條邊的寬度放大，將正方形寬高都設(shè)成0px，將每條邊的border的寬度都設(shè)成50px（原正方形寬度或高度的一半）

 .triangle{
 width: 0px;
 height: 0px;
 border-style: solid;
 background-color: orangered;
 border-top-color: red;
 border-right-color: green;
 border-bottom-color: blue;
 border-left-color:blueviolet;
 border-top-width: 50px;
 border-bottom-width: 50px;
 border-left-width: 50px;
 border-right-width: 50px;
 }

是不是各個(gè)邊都露出三角形了，要的形狀就出來(lái)了，這就是有趣的border。

分解3：

最后一步就簡(jiǎn)單了，把不需要的邊都透明掉，只留下底邊，并且透明掉背景。

 .triangle{
 width: 0px;
 height: 0px;
 border-style: solid;
 background-color: transparent;
 border-top-color: transparent;
 border-right-color: transparent;
 border-bottom-color: blue;
 border-left-color:transparent;
 border-top-width: 50px;
 border-bottom-width: 50px;
 border-left-width: 50px;
 border-right-width: 50px;
 }

透明掉各邊和背景后，需要的三角形就出來(lái)了，很有趣。

如果要使他變成鈍角，就把底邊的寬度變小，如果是銳角，就增加寬度。

如果是直角，就把左或右border的寬度設(shè)成0px。

各種三角形可通過(guò)各邊的寬度值的調(diào)整來(lái)實(shí)現(xiàn)。

6.直線

直線就比較簡(jiǎn)單，壓縮高度或?qū)挾染妥兂闪酥本€。

html:

css:

 .line{
 width: 100px;
 height: 3px;
 background-color: orangered;
 }

呈現(xiàn):

7.弧

本質(zhì)上是利用圓角來(lái)實(shí)現(xiàn)，現(xiàn)在需要把矩形的左上角的圓角繪制成弧形，那么把右邊和底邊border的寬度設(shè)成0px，讓他們不可見，設(shè)置左上角圓角的半徑，讓其變大，看得明顯些，其余的圓角半徑全都設(shè)成0px，這樣一個(gè)弧形就完成了。

html:

css:

 .arc {
 width: 100px;
 height: 100px;
 border-style: solid;
 border-top-width: 10px;
 border-bottom-width: 0px;
 border-left-width: 10px;
 border-right-width: 0px;
 border-top-color: blue;
 border-bottom-color: red;
 border-left-color: red;
 border-right-color: red;
 background-color: transparent;
 border-top-right-radius: 0px;
 border-top-left-radius: 100px;
 border-bottom-right-radius: 0px;
 border-bottom-left-radius: 0px;
 }

呈現(xiàn):

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

div+css3繪制基本圖形-白色的海

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：圖像 css 基本的

熱門焦點(diǎn)

div+css3繪制基本圖形-白色的海

div+css3繪制基本圖形-白色的海

div+css3繪制基本圖形-白色的海

最新推薦

猜你喜歡

熱門推薦