站長資訊網(wǎng)
最全最豐富的資訊網(wǎng)站

十分鐘教會你僅使用一個div配合css實現(xiàn)餅狀圖

本篇文章給大家?guī)砹岁P(guān)于怎樣使用一個div配合css實現(xiàn)病狀圖的相關(guān)問題,希望對大家有幫助。

十分鐘教會你僅使用一個div配合css實現(xiàn)餅狀圖

完整的代碼請滑到文末。

我們只使用一個div,僅采用css實現(xiàn)餅狀圖。

HTMl 結(jié)構(gòu)

<div class="pie" style="--p:60;--b:10px;--c:purple;">60%</div>

我們添加了幾個 css 的變量:

  • –p:進度條的百分比(純數(shù)字,不帶%),餅狀圖值和 div 內(nèi)容(帶%)一致。

  • –b:邊框厚度的值

  • –c:邊框的主體顏色

本文使用的是簡寫的變量,在生產(chǎn)環(huán)境中,為了達到可讀性,我們應(yīng)該使用–p -> –percentage, –b -> –border-thickness, –c -> –main-color 來表示。

Pie 的基本設(shè)置

我們?yōu)轱灎顖D設(shè)定基本的樣式。

.pie {   --w: 150px; // --w -> --width   width: var(--w);   aspect-ratio: 1; // 縱橫比,1 說明是正方形   display: inline-grid;   place-content: center;   margin: 5px;   font-size: 25px;   font-weight: bold;   font-family: sans-serif; }

上面我們使用了 aspect-ratio: 1; 保證 div 是正方形,當(dāng)然你也可以使用 height: var(–w) 達到效果。

接下來,我們使用偽元素實現(xiàn)簡單的餅狀圖:

.pie:before {   content: "",   position: absoute;   border-radius: 50%;   inset: 0; // 知識點 1   background: conic-gradient(var(--c) calc(var(--p)*1%),#0000 0); // 知識點 2 }

知識點1: inset: 0; 相當(dāng)于 top: 0; right: 0; bottom: 0; top: 0;

知識點2: conic-gradient 圓錐漸變,css 方法,

贊(0)
分享到: 更多 (0)
網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號
国产精品国产三级国产an| 精品亚洲成α人无码成α在线观看| 亚洲AV无码国产精品色| 成人无号精品一区二区三区| 国产成人vr精品a视频| 精品成人免费自拍视频| 无码国产精品一区二区免费式直播| 久久国产亚洲精品麻豆| 九九在线精品视频| 在线观看免费精品国产| 2021国产成人午夜精品| 久久精品国产成人AV| 精品久久久久久无码免费| 在线观看国产精品麻豆| 无码成人精品区在线观看| 99久久亚洲综合精品成人网| 亚洲国产另类久久久精品小说| www好男人精品视频在线观看| 亚洲AV无码之日韩精品| 日本久久中文字幕精品| 日韩精品久久久久久| 久久97久久97精品免视看秋霞| 精品一区二区三区中文| 四虎成人精品在永久在线观看| 精品无码综合一区二区三区| 97久久久精品综合88久久| 亚洲精品无码久久久久久久| 无码国产乱人伦偷精品视频| 国产亚洲欧洲精品| 91国内外精品自在线播放| 亚洲精品综合久久| 日韩乱码在线观看| 久久久无码精品亚洲日韩蜜桃| 国产精品9999久久久久仙踪林| 久久久g0g0午夜无码精品| 99久久综合国产精品免费| 国产成人亚洲精品| 亚洲乱码日产精品BD在线观看| 久久99精品久久久久婷婷| 久久精品成人影院| 日韩精品专区AV无码|