html – 使用css在li中显示进度的一半

概述如下所示： 我的Less现在看起来如下. /*progressbar*/.progressbar { margin-bottom: 30px; margin-top: 10px; counter-reset: step; clear: both;}.progressbar li { font-size: 12px; width: 24%;

如下所示：

我的Less现在看起来如下.

/*progressbar*/.progressbar {    margin-bottom: 30px;    margin-top: 10px;    counter-reset: step;    clear: both;}.progressbar li {    Font-size: 12px;    wIDth: 24%;    float: left;    position: relative;    text-align: center;    &:before {    content: counter(step);    counter-increment: step;    wIDth: 25px;    line-height: 13px;    display: block;    Font-size: 12px;    color: transparent;    border: 6px solID #ececec ;    background: #27ae60 ;    border-radius: 19px;    margin: 0 auto 4px;    }    &:after {    content: '';    wIDth: 85%;    height: 3px;    background: #B9B9B9;    position: absolute;    left: -42%;    top: 10px;    z-index: 0;   }   &:first-child:after {    content: none;   }}.progress-payment li {    wIDth: 50%;}.progressbar li.active{    &:after,&:before {          background: @success-btn;    color: @success-btn;    }}

HTML

<ul >    <li >Order Placed</li>    <li>Shipped</li>    <li>Completed</li>    <li>Settled</li></ul>

请帮忙

解决方法 您可以通过对生成条形的伪元素使用线性渐变背景来执行此 *** 作.渐变是一半,上半部分的颜色完成,休息的颜色为待定颜色.

/*progressbar*/.progressbar {  margin-bottom: 30px;  margin-top: 10px;  counter-reset: step;  clear: both;  List-style: none;}.progressbar li {  Font-size: 12px;  wIDth: 24%;  float: left;  position: relative;  text-align: center;}.progressbar li:before {  content: counter(step);  counter-increment: step;  wIDth: 25px;  line-height: 25px;  display: block;  Font-size: 12px;  color: transparent;  border: 6px solID #ececec;  background: #27ae60;  border-radius: 19px;  margin: 0 auto 4px;}.progressbar li:after {  content: '';  wIDth: 85%;  height: 3px;  background: #B9B9B9;  position: absolute;  left: -42%;  top: 17px;  z-index: -1;}.progressbar li:first-child:after {  content: none;}.progress-payment li {  wIDth: 50%;}.progressbar li.active:after,.progressbar li.active:before {  background: #27ae60;  color: white;}.progressbar li.complete:after {  background: #27ae60;}.progressbar li.half-complete:after {  background: linear-gradIEnt(to right,#27ae60 50%,#B9B9B9 50%);  color: white;}

<ul >  <li >Order Placed</li>  <li >Shipped</li>  <li >Completed</li>  <li >Settled</li></ul>

如果您想为进度条略微弯曲半填充,则可以使用径向渐变作为背景,如下面的代码段所示.

/*progressbar*/.progressbar {  margin-bottom: 30px;  margin-top: 10px;  counter-reset: step;  clear: both;  List-style: none;}.progressbar li {  Font-size: 12px;  wIDth: 24%;  float: left;  position: relative;  text-align: center;}.progressbar li:before {  content: counter(step);  counter-increment: step;  wIDth: 25px;  line-height: 25px;  display: block;  Font-size: 12px;  color: transparent;  border: 6px solID #ececec;  background: #27ae60;  border-radius: 19px;  margin: 0 auto 4px;}.progressbar li:after {  content: '';  wIDth: 85%;  height: 3px;  background: #B9B9B9;  position: absolute;  left: -42%;  top: 17px;  z-index: -1;}.progressbar li:first-child:after {  content: none;}.progress-payment li {  wIDth: 50%;}.progressbar li.active:after,.progressbar li.active:before {  background: #27ae60;  color: white;}.progressbar li.complete:after {  background: #27ae60;}.progressbar li.half-complete:after {  background: radial-gradIEnt(50% 300% at 25% 50%,#B9B9B9 40%);  color: white;}

<ul >  <li >Order Placed</li>  <li >Shipped</li>  <li >Completed</li>  <li >Settled</li></ul>

注意：两种解决方案均假设您的target browsers are those that support gradients(IE10).

总结

以上是内存溢出为你收集整理的html – 使用css在li中显示进度的一半全部内容，希望文章能够帮你解决html – 使用css在li中显示进度的一半所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。