css3如何实现条状百分比的效果-创新互联

本篇文章为大家展示了css3如何实现条状百分比的效果，代码简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

为企业提供成都网站设计、网站建设、网站优化、营销型网站建设、竞价托管、品牌运营等营销获客服务。创新互联拥有网络营销运营团队，以丰富的互联网营销经验助力企业精准获客，真正落地解决中小企业营销获客难题，做到“让获客更简单”。自创立至今，成功用技术实力解决了企业“网站建设、网络品牌塑造、网络营销”三大难题，同时降低了营销成本，提高了有效客户转化率，获得了众多企业客户的高度认可！

效果图就是上方所示了，整个长条表示100%，绿色的部分表示该条目占比，鼠标移到该长条上时，显示百分比(title属性设置)
首先这个百分比，你要计算出来。
该条状，我用的是Label来进行显示，设置其background即可。用什么容器并不固定，根据自己布局需要，但是确定的一点是容器的宽度必须设置。
设置背景颜色的代码入下：
background:linear-gradient(to right, green 33.90%, #9e9e9e70 33.90%)
linear-gradient表示线性渐变，三个参数设置，第一个参数为方向to left：

设置渐变为从右到左。相当于: 270deg
to right：
设置渐变从左到右。相当于: 90deg
to top：
设置渐变从下到上。相当于: 0deg
to bottom：
设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。

后面为颜色设定，显而易见了，两个颜色，色值后跟该颜色的百分比，两个百分比一致即可，否则会出现一部分两个颜色的线性渐变。

上述内容就是css3如何实现条状百分比的效果，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联网站制作公司行业资讯频道。

本文标题：css3如何实现条状百分比的效果-创新互联
文章转载：http://bzwzjz.com/article/djijsp.html