亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

CSS圖形繪制總結(jié)

SQC / 2715人閱讀

摘要：由張鑫旭大佬的幾篇文章常見的圖形繪制合集，小純實現(xiàn)打字動畫效果，分享三個純實現(xiàn)個英文字母的案例，發(fā)現(xiàn)了，一些特殊用法，由此想到自己做個總結(jié)。

由張鑫旭大佬的幾篇文章
常見的CSS圖形繪制合集，
小tips: 純CSS實現(xiàn)打字動畫效果，
分享三個純CSS實現(xiàn)26個英文字母的案例，
發(fā)現(xiàn)了border，border-radius, box-shadow一些特殊用法，由此想到自己做個總結(jié)。

border 只寫一條邊 
.triangle {
  width: 100px;
  border-top: 100px solid red;
}


同理可得其他邊。

寫border，同時只寫一條邊 top 
.triangle {
    width: 100px;
    border: 100px solid black;
    border-top: 100px solid red;
}

left 
.triangle {
    width: 100px;
    border: 100px solid black;
    border-left: 100px solid red;
}

寫border，同時寫兩條邊 
.triangle {
    width: 100px;
    border: 100px solid black;
    border-top: 100px solid red;
    border-bottom: 100px solid blue;
}

由此基本可以看出四條邊的組成情況，在此基礎(chǔ)上就可以做出各種變形。比如，文章中提到的 向下三角， 梯形等

boder-radius 應(yīng)用一條邊 top 
.triangle {
    width: 100px;
    border: 100px solid black;
    border-top: 100px solid red;
    border-radius: 200px 0 0 0;
}

.triangle {
    width: 50px;
    height: 50px;
    border-top: 10px solid red;
    border-radius: 200px 0 0 0;
}

鏤空 
.triangle {
    width: 50px;
    height: 50px;
    
    border: 50px solid black;
    border-radius: 50px 0 0 0;
}

應(yīng)用兩條邊 
.triangle {
    width: 50px;
    height: 50px;
    border-top: 10px solid red;
    border-left: 10px solid yellow;
    border-radius: 100px;
}

應(yīng)用四條邊 圓環(huán) 
.triangle {
    width: 50px;
    height: 50px;
    border-top: 10px solid red;
    border-radius: 100px;
}

border-radius完整結(jié)構(gòu) 
border-radius: 1-4 length|% / 1-4 length|%;

“/” 前的四個數(shù)值表示圓角的水平半徑，后面四個值表示圓角的垂直半徑:

鵝蛋 
.triangle {
    width: 50px;
    height: 50px;
    background: lightpink;
    border-bottom: 10px solid blue;
    border-left: 10px solid yellow;
    border-right: 10px solid black;
    border-top: 10px solid red;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

box-shadow 
.triangle {
    width: 50px;
    height: 50px;
    background: lightpink;
    box-shadow: 50px 50px 0 0 purple;
}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/117321.html

相關(guān)文章

  • mxGraph使用經(jīng)驗總結(jié)

    摘要：邊繪制成折線的時候為兩種形式，默認是通過貝塞爾曲線繪制成帶圓角的折線，另一種是直角折線。在開發(fā)中我對邊的繪制方式進行了小小的修改，統(tǒng)一改為直接使用三次貝塞爾曲線連接，具體代碼如下調(diào)用內(nèi)置函數(shù)繪制三次貝塞爾曲線忽略后面繪制折線的代碼參考 mxGraph是一個支持多種語言（Java、JavaScript、PHP、.NET）的畫圖框架，所繪制的圖形可以在主流瀏覽器以及原生應(yīng)用上使用。mxGr...

    k00baa 評論0 收藏0

  • mxGraph使用經(jīng)驗總結(jié)

    摘要：首先不支持使用，。相關(guān)代碼如下邊的邊都是自動繪制的，支持對邊的樣式修改，比如箭頭粗細等。邊繪制成折線的時候為兩種形式，默認是通過貝塞爾曲線繪制成帶圓角的折線，另一種是直角折線。mxGraph是一個支持多種語言（Java、JavaScript、PHP、.NET）的畫圖框架，所繪制的圖形可以在主流瀏覽器以及原生應(yīng)用上使用。 mxGraph官方資料全英文，網(wǎng)上有幾篇mxGraph的教程，對于入門和...

    raledong 評論0 收藏0

  • 高程3總結(jié)#第15章使用Canvas繪圖

    摘要：使用繪圖基本用法要使用元素，必須先設(shè)置其和屬性，指定可以繪圖的區(qū)域大小。，將繪圖游標移動到，不畫線。，表示文本對齊方式。執(zhí)行這個變換之后，坐標會變成之前由表示的點。，后繪制的圖形完全替代與之重疊的先繪制圖形。也實現(xiàn)了，但默認是禁用的。 使用Canvas繪圖 基本用法 要使用元素，必須先設(shè)置其width和height屬性，指定可以繪圖的區(qū)域大小。出現(xiàn)在開始和結(jié)束標簽中的內(nèi)容是后備信息...

    shusen 評論0 收藏0

  • css三角形繪制方法總結(jié)

    摘要：在做頁面重構(gòu)的時候，免不了和各種小圖標打交道，這其中最多的應(yīng)該是三角形以及箭頭，一般情況下可以通過偽類使用解決大部分問題。 在做UI（頁面重構(gòu)）的時候，免不了和各種小圖標打交道，這其中最多的應(yīng)該是三角形以及箭頭，一般情況下可以通過偽類使用unicode解決大部分問題。 現(xiàn)在我們來總結(jié)下幾種使用css繪制三角形的方法，dom結(jié)構(gòu)如下： 最簡單最方便的辦法 background 代碼忽略...

    rickchen 評論0 收藏0

  • 瀏覽器之硬件加速機制

    摘要：書接上文瀏覽器內(nèi)核之渲染基礎(chǔ)硬件加速基礎(chǔ)概念硬件加速技術(shù)是指使用的硬件能力為幫助渲染網(wǎng)頁，在為的作用主要是用來繪制圖形并且性能特別好。包含的節(jié)點表示的是使用硬件加速的元素或者技術(shù)。 showImg(https://segmentfault.com/img/remote/1460000016348971); 微信公眾號：愛寫bugger的阿拉斯加如有問題或建議，請后臺留言，我會盡力解決你...

    mengera88 評論0 收藏0

發(fā)表評論

0條評論

SQC

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<