前端 - 类似这种图例怎么实现效果比较好
问题描述
问题解答
回答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. 老师,CSS3里面,选择一个DIV,这个DIV是以什么为原点进行旋转的啊?2. javascript - JS用ajax爬取百度外卖店家信息3. html - vue如何定义一个变量,让所有组件都能使用4. android - 求 360浏览器 百度浏览器 搜狗浏览器的最新启动类名5. 数据库设计 - Binary Allow Null Default mysql数据库字段属性问题 ?6. PHP中的$this代表当前的类还是方法?7. pdo 写入到数据库的内容为中文的时候写入乱码8. mysql每隔10来秒就有一次7、8MB的写入9. javascript - 微信提现页面的键盘怎么做的10. php laravel框架模型作用域