用css实现进度条效果&&解决父元素的透明度影响子元素的问题

再用vant+vue写项目的时候，有个需求是实现一个定制的进度条，组件没有合适的，索性自己写了，单纯用css实现

直线式进度条

 <template>
<div class="bg-line bg">
   <div class="line inner"></div>
 </div>
</template>
<style>
 .bg {
          width: 100%;
          height: 8px;
          border-radius: 4px;
          display: flex;
          align-items: center;
        }
        .bg-line {
          background: rgba(0, 0, 0, 0.1);
        }

        .inner {
          height: 100%;
          border-radius: 4px;
          transition: all 0.5s cubic-bezier(0, 0.64, 0.36, 1);
        }

        .line {
          width: 50%;
          background-color: var(--color-orange);
        }

</style>

来看一下效果：

 就实现了

在这个过程中一开始出现了一个问题 再给父元素设置透明度的时候 ，子元素的透明度受到影响，出现下面这种效果

当时代码是这么写得，用的opacity给父元素设置的透明度：

.bg-line{
    border-radius: 70px;
    opacity: 0.10000000149011612;
    background: #000;
}

 通过审查元素可以发现，子级继承了父级的opacity为1，从而影响了子级的样式

解决办法：

1、给子集设计opacity为1，没有效果

2、通过查找opacity的样式会被子集继承，但是rgba()不会

所以代码改为如下，问题得到解决：

.bg-line {
   background: rgba(0, 0, 0, 0.1);
 }

总结：

总结rgba和opacity区别

rgba：
R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数 | 百分数
A：Alpha透明度。取值0~1之间。
opacity:
取值为从 0.0 （完全透明）到 1.0（完全不透明）