Css 进展停止看起来很失败_Css_Progress Bar_Z Index_Layer

Css 进展停止看起来很失败

css

Css 进展停止看起来很失败,css,progress-bar,z-index,layer,Css,Progress Bar,Z Index,Layer,进展停止看起来很失败我试过：左边框：5px实心透明设置具有更高z指数的停止点这些都不是很防弹的，但这里有一种方法可以让你得到你想要的：我在这里所做的就是在水平条中添加一些：：在代码之后 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> .progress-cir { background: #fff; display:

进展停止看起来很失败

我试过：

左边框：5px实心透明
设置具有更高z指数的停止点

这些都不是很防弹的，但这里有一种方法可以让你得到你想要的：

我在这里所做的就是在水平条中添加一些

：：在代码之后
<!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>


.进展情况{
背景：#fff；
显示：块；
高度：30px；
宽度：30px；
边界半径：50%；
显示：内联块；
位置：相对位置；
利润率：0-11px；
z指数：10；
边框：5px实心#f3f0e9；
}
.进度记录{
背景：#fff；
显示：块；
高度：14px；
宽度：67px；
显示：内联块；
位置：相对位置；
顶部：-8px；
边框顶部：5px实心#f3f0e9；
边框底部：5px实心#f3f0e9；
左：0px；
z指数：20；
}
.进展积极{
背景：#1e79c3！重要；
}
.progress活动+.progress记录：：之后{
内容：“；
位置：绝对位置；
左：-28px；
顶部：-8px；
高度：14px；
宽度：30px；
高度：30px；
背景：#1e79c3；
边界半径：50%；
}
尝试向活动类添加边距：0-9px。我已经更新了我的JSFIDLE，以便更好地展示我将如何使用这个进度条。你的主意不错，但行不通。无论如何谢谢你！完美的非常感谢你，拉尔夫！
<!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>