前端 - 類似這種圖例怎么實現效果比較好
問題描述
問題解答
回答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. python - 我在使用pip install -r requirements.txt下載時，為什么部分能下載，部分不能下載2. mysql - 分庫分表、分區、讀寫分離 這些都是用在什么場景下 ，會帶來哪些效率或者其他方面的好處3. node.js - nodejs開發中常用的連接mysql的庫4. 網頁爬蟲 - python 爬取網站 并解析非json內容5. mysql - jdbc的問題6. Python爬蟲如何爬取span和span中間的內容并分別存入字典里？7. 視頻文件不能播放，怎么辦？8. mysql - 如何減少使用或者不用LEFT JOIN查詢？9. python - 編碼問題求助10. linux - python 抓取公眾號文章遇到驗證問題
網公網安備