CSS box-shadow z-index 或更改顺序
CSS box-shadow z-index or change order
我想用box-shadow实现如下效果:
但我正在实现以下目标:
我正在使用以下代码:
<div class="progress-container"></div>
.progress-container {
width: 100%;
height: 11px;
position: relative;
background: #EAEFF5;
border-radius: 5px;
z-index: -1;
box-shadow:
80px 0 0 #0AA693 inset,
500px 0 0 #FF7800 inset;
}
你可以找到我的代码笔here
感谢您的帮助。
我不认为可以使用框阴影来执行此操作,因为您无法为 x
位置设置起点。
.progress-container {
width: 100%;
height: 11px;
position: relative;
background: #EAEFF5;
border-radius: 5px;
}
.progress-container::before,
.progress-container::after {
content: "";
position: absolute;
border-radius: inherit;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.progress-container::before {
background-color: #FF7800;
width: 500px;
}
.progress-container::after {
background-color: #0AA693;
width: 80px;
}
<div class="progress-container">
</div>
只是增加X轴,你在最初的faze中设置为80px,80px 0 0 #0AA693 inset,
这是阴影,第一个数字是X轴,第二个是Y轴,第三个编号模糊。所以把它改成类似400px 0 0 #0aa693
的东西,这就是解决方案。
.progress-container {
width: 100%;
height: 30px;
position: relative;
background: #eaeff5;
border-radius: 3px;
z-index: -1;
box-shadow: 400px 0 0 #0aa693 inset, 500px 0 0 #ff7800 inset;
}
我想用box-shadow实现如下效果:
但我正在实现以下目标:
我正在使用以下代码:
<div class="progress-container"></div>
.progress-container {
width: 100%;
height: 11px;
position: relative;
background: #EAEFF5;
border-radius: 5px;
z-index: -1;
box-shadow:
80px 0 0 #0AA693 inset,
500px 0 0 #FF7800 inset;
}
你可以找到我的代码笔here
感谢您的帮助。
我不认为可以使用框阴影来执行此操作,因为您无法为 x
位置设置起点。
.progress-container {
width: 100%;
height: 11px;
position: relative;
background: #EAEFF5;
border-radius: 5px;
}
.progress-container::before,
.progress-container::after {
content: "";
position: absolute;
border-radius: inherit;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.progress-container::before {
background-color: #FF7800;
width: 500px;
}
.progress-container::after {
background-color: #0AA693;
width: 80px;
}
<div class="progress-container">
</div>
只是增加X轴,你在最初的faze中设置为80px,80px 0 0 #0AA693 inset,
这是阴影,第一个数字是X轴,第二个是Y轴,第三个编号模糊。所以把它改成类似400px 0 0 #0aa693
的东西,这就是解决方案。
.progress-container {
width: 100%;
height: 30px;
position: relative;
background: #eaeff5;
border-radius: 3px;
z-index: -1;
box-shadow: 400px 0 0 #0aa693 inset, 500px 0 0 #ff7800 inset;
}