我正在使用纯CSS设计一个3阶段进度条。我目前的努力如下所示。
#progBar
{
background-color:#bdbdbd;
padding:1.5vw;
position:relative;
height:9vw;
}
.progcapt
{
background-color: #526cfd;
color: transparent;
text-shadow: 0px 2px 3px #526cfd;
-webkit-background-clip:text;
font-family:'arial black';
font-size:3vw
}
#cOne
{
position:absolute;
left:calc(50% - 2.5vw);
top:calc(50% - 2.5vw);
border-radius:5vw;
height:5vw;
width:5vw;
border:1px solid #526cfd;
text-align:center;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0px 0px 3vw #526cfd;
background-color:white;
}
#cOne::before
{
position:absolute;
width:50vw;
height:1vw;
background-color:rgba(82,108,253,0.5);
content:'';
/*z-index:-1; does not give the expected result*/
}
#cOneRing
{
position:absolute;
top:-calc(0.5vw + 1px);
left:-calc(0.5vw + 1px);
width:6vw;
height:6vw;
border:1px solid #526cfd;
border-radius:6vw;
}
<div id='progBar'>
<div id='cOne'>
<span class='progcapt'>1</span>
<div id='cOneRing'> </div>
</div>
</div>
这里的意图是
::before
伪元素用于创建进度条的轨道我遇到的问题 - 我以为我可以通过将其z-index属性设置为-1来发送轨道栏在后面的父盘元素。然而,这只会导致它完全消失。显然,我在这里做错了,但我无法发现可能是什么。希望这里有人能够发现错误。
答案 0 :(得分:1)
据我所知,你需要这个
#progBar {z-index: -2;}
#cOne::after { z-index: -1;}
#progBar
{
z-index: -2;
background-color:#bdbdbd;
padding:1.5vw;
position:relative;
height:9vw;
}
.progcapt
{
background-color: #526cfd;
color: transparent;
text-shadow: 0px 2px 3px #526cfd;
-webkit-background-clip:text;
font-family:'arial black';
font-size:3vw
}
#cOne
{
position:absolute;
left:calc(50% - 2.5vw);
top:calc(50% - 2.5vw);
border-radius:5vw;
height:5vw;
width:5vw;
border:1px solid #526cfd;
text-align:center;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0px 0px 3vw #526cfd;
background-color:white;
}
#cOne::before
{
position:absolute;
width:50vw;
height:1vw;
background-color:rgba(82,108,253,0.5);
content:'';
z-index:-1;
}
#cOneRing
{
position:absolute;
top:-calc(0.5vw + 1px);
left:-calc(0.5vw + 1px);
width:6vw;
height:6vw;
border:1px solid #526cfd;
border-radius:6vw;
}
&#13;
<div id='progBar'>
<div id='cOne'>
<span class='progcapt'>1</span>
<div id='cOneRing'> </div>
</div>
</div>
&#13;