css - 进度条从父容器外开始

Question

您会在最左侧看到小红色。进步从外部开始。它也不采用具有一定边界半径的容器的形状。

.progress-bar {
  background: grey;
  width: 90%;
  height: 10px;
  border-radius: 15px;
}
.progress-line {
  height: 10px;
  border-radius: 15px;
  background: red;
  height: 10px;
  border-radius: 15px;
  width: 2px;
}
.upload-percent {
  margin-top: 10px;
  text-align: center;
}

<div class="progress-bar">
<div class="progress-line">
</div>
<div class="upload-percent">
Uploading... 72%
</div>
</div>

Answer 1

你应该像下面这样使用隐藏在外部 div 上的溢出:

.progress-bar {
  background: grey;
  width: 90%;
  height: 10px;
  border-radius: 15px;
  overflow: hidden;
}
.progress-line {
  height: 10px;
  background: red;
  border-radius: 15px;
  width: 2px;
}
.upload-percent {
  margin-top: 10px;
  text-align: center;
}

<div class="progress-bar">
<div class="progress-line">
</div>
<div class="upload-percent">
Uploading... 72%
</div>
</div>