CSS box-shadow z-index 或更改顺序答案

【问题标题】：CSS box-shadow z-index or change orderCSS box-shadow z-index 或更改顺序
【发布时间】：2023-03-22 00:27:01
【问题描述】：

我想用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

感谢您的帮助。

【问题讨论】：

标签： css border-radius

【解决方案1】：

我认为不可能用盒子阴影来做到这一点，因为您无法为 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>

【讨论】：

【解决方案2】：

只要增加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;
}

【讨论】：