CSS圖形繪制總結

SQC 發布于2019-08-30 15:55 / 2558人閱讀

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

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

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;
}

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

boder-radius 應用一條邊 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;
}

應用兩條邊

.triangle {
    width: 50px;
    height: 50px;
    border-top: 10px solid red;
    border-left: 10px solid yellow;
    border-radius: 100px;
}

應用四條邊 圓環

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

border-radius完整結構

border-radius: 1-4 length|% / 1-4 length|%;

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

鵝蛋

.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;
}

云服務器 GPU云服務器圖形繪制 Android繪制圖形 html繪制圖形代碼 html繪制圖形排列

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117321.html

mxGraph使用經驗總結

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

k00baa 2019-08-26 13:58 評論0 收藏0
mxGraph使用經驗總結

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

raledong 2019-05-23 11:56 評論0 收藏0
高程3總結#第15章使用Canvas繪圖

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

shusen 2019-08-26 12:20 評論0 收藏0
css三角形繪制方法總結

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

rickchen 2019-08-29 13:13 評論0 收藏0
瀏覽器之硬件加速機制

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

mengera88 2019-08-23 11:54 評論0 收藏0