前端 - 類似這種圖例怎么實現效果比較好
問題描述
問題解答
回答1：可以用線性漸變.
<p class='linear'></p>
.linear{ width: 300px; height: 10px; border-radius: 5px; background-image: linear-gradient(to right, red 25%, blue 25%, blue 50%, green 50%, green 75%, gray 75%);}
https://jsfiddle.net/mmdgtj1e/
回答2：這是靜態圖嗎？假設如果是，不需要來加動態效果，這個還是很好做的，最可恥的方法 扔給美工姐姐去，讓她直接給你P出來個PNG直接用要是自己弄得換這個用行內元素拼接唄，然后設置邊框
.common{ display:inline-block; width: 100px; float: left;}.clearfix{ *zoom: 1; }.clearfix:after { display: table; clear: both; content: ''; }.one{border-top:3px solid #ddd;}.two{border-top:3px solid #e34;}.three{border-top:3px solid #532;}.four{border-top:3px solid #244532;}.five{ border-top:3px solid #ccc;}----------<p class='clearfix'><span class=’one common’>1</span><span class=’two common’>10</span><span class=’three common’>100</span><span class=’four common’>1000</span><span class=’five common’>10000</span></p>
相關文章：
1. javascript - sublime快鍵鍵問題2. javascript - immutable配合react提升性能？3. 配置Apache時，添加對PHP的支持時語法錯誤4. 實現bing搜索工具urlAPI提交5. javascript - vue-router 地址改變數據未改變6. javascript - html5多個label中其中一個觸發change，如何判斷是哪一個出發了change7. javascript - 移動端上不能實現拖拽布局嗎？8. css - 寫頁面遇到個布局問題，求大佬們幫解答，在線等，急！~9. phpstudy8.1支持win11系統嗎？10. javascript - nodejs關于進程間發送句柄的一點疑問
網公網安備