Question

我创建了一个分组进度条，用于加载具有不同颜色的多个进度条。我还在每个进度条之间添加browser() browser()。我想弄清楚其中一个进度条是否有值border-right，然后不添加1px 0，因为如果值为border-right，它会增加总计右边的1px边界。我该如何解决？

请检查下面的示例代码。我有第3个进度条值0，因此它会添加2px的边框。

https://codepen.io/Nick1212/pen/KvggVY

2px

Answer 1

将box-sizing: border-box;添加到.well-ProgressGroup。这样，您的width值也可以控制边框。

Answer 2

您可以使用:not([style*="width: 0"])选择器在width: 0属性中选择不包含style的元素。演示：

.well-ProgressGroup {
  display: flex;
  background: #d3d4d5;
  flex-direction: row;
  border-radius: 0.5em;
  overflow: auto;
  position: relative;
  z-index: 1;
}

@keyframes loadbar {
  0% {
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.well-ProgressGroup--progress {
  transform: translateX(-100%) translate3d(0, 0, 0);
  opacity: 0;
  background: blue;
}

.well-ProgressGroup--progress:not(:last-child):not([style*="width: 0"]) {
  border-right: 1px solid white;
}

.well-background--concept1 {
  background: tomato;
}

.well-background--concept2 {
  background: blue;
}

.well-background--concept3 {
  background: purple;
}

.well-background--concept4 {
  background: red;
}

.well-background--concept5 {
  background: green;
}

<div>
  <h1 class="u-pb--lg text-bold">Grouped ProgressBar Component Examples</h1>
  <div class="space">
    <div> Example: User earning all the points</div>
    <div class="well-ProgressGroup">
      <!-- react-text: 94 -->
      <!-- /react-text -->
      <div class="well-background--concept1 well-ProgressGroup--progress" style="width: 50%; animation:  0.5s linear 0s forwards loadbar;z-index: -1; height: 50px;"></div>
      <div class="well-background--concept2 well-ProgressGroup--progress" style="width: 75%; animation:  0.5s linear 0.5s forwards loadbar; z-index: -2; height: 50px;"></div>
      <div class="well-background--concept3 well-ProgressGroup--progress" style="width: 0%; animation:  0.5s linear 1s forwards loadbar; z-index: -3; height: 50px;"></div>
      <div class="well-background--concept4 well-ProgressGroup--progress" style="width: 250%; animation:  0.5s linear 1.5s forwards loadbar; z-index: -4; height: 50px;"></div>
      <div class="well-background--concept5 well-ProgressGroup--progress" style="width: 300%; animation:  0.5s linear 2s forwards loadbar; z-index: -5; height: 50px;"></div>
      <div class="well-background--concept5 well-ProgressGroup--progress" style="width: 300%; animation:  0.5s linear 2.5s forwards loadbar; z-index: -5; height: 50px;"></div>
      <!-- react-text: 101 -->
      <!-- /react-text -->
    </div>
  </div>
</div>

Answer 3

你必须模拟边框。你可以用背景渐变来做到这一点。

见这里：https://codepen.io/anon/pen/WEGGKV?editors=1100

.well-ProgressGroup--progress {
  background-image: linear-gradient(#fff, #fff),
                    linear-gradient(#fff, #fff),
                    linear-gradient(#fff, #fff),
                    linear-gradient(#fff, #fff);
  background-position: 0 0, 100% 0, 0 0, 00;
  background-repeat: no-repeat;
  background-size: 0px 100%, 1px 100%, 100% 0px, 100% 0px;
}

如果进度条值为0，请勿向右添加边框

3 个答案: