Question

进度停止看起来破碎

我试过了：

左边框：5px实心透明
设置以更高的z-index

enter image description here

.progress-cir {
  background: #fff;
  display: block;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  margin: 0 -11px;
  z-index: 10;
  border: 5px solid #f3f0e9; }

.progress-rec {
  background: #fff;
  display: block;
  height: 14px;
  width: 67px;
  display: inline-block;
  position: relative;
  top: -8px;
  border-top: 5px solid #f3f0e9;
  border-bottom: 5px solid #f3f0e9;
  left: 0px;
  z-index: 20; }

.progress-active {
  background: #1e79c3 !important; }

Answer 1

这些都不是非常防弹，但这是你可能得到你想要的方式：http://codepen.io/pageaffairs/pen/aGeok

我在这里所做的就是在水平条上添加一些::after代码。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

.progress-cir {
  background: #fff;
  display: block;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  margin: 0 -11px;
  z-index: 10;
  border: 5px solid #f3f0e9; 
}

.progress-rec {
  background: #fff;
  display: block;
  height: 14px;
  width: 67px;
  display: inline-block;
  position: relative;
  top: -8px;
  border-top: 5px solid #f3f0e9;
  border-bottom: 5px solid #f3f0e9;
  left: 0px;
  z-index: 20; 
}

.progress-active {
  background: #1e79c3 !important; 
}

.progress-active + .progress-rec::after {
    content: "";
    position: absolute;
    left: -28px;
    top: -8px;
    height: 14px;
    width: 30px; 
    height: 30px;
    background: #1e79c3;
    border-radius: 50%;
}

</style>
</head>
<body>

<a class="progress-cir progress-active"></a>
<a class="progress-rec progress-active"></a>
<a class="progress-cir progress-active"></a>
<a class="progress-rec"></a>
<a class="progress-cir"></a>
<a class="progress-rec"></a>
<a class="progress-cir"></a>

</body>
</html>

进度停止看起来破碎

1 个答案: