html/css：加载栏（带缓冲区）

你们能帮我调整一下我的加载条css和/或html吗。我有两个问题，目前存在与我目前的加载栏

其一是，在边界外的左右两侧，有一些多余的阴影从条形图中消失（这使边界半径在适当缩放时看起来像是像素化的）。我知道这是

框阴影

的问题，因为当我删除

#progress

和

#buffer

的框阴影属性时，它不在那里

还有一个很小，但真的很烦我。当进度/缓冲条刚开始加载时（更改

style=“width:0.4%”

），带半径的div的形式会在容器外部：

我知道我可以

overflow:hidden

它（我已经在

#loading_bar_container

中这样做了），但我认为

position:absolute

不想隐藏它（我需要绝对，因为我需要两个条在一个位置，相互重叠）。当我通过

#buffer

（因此只有一个条）移除，并移除

加载条的
位置：相对
和
#progress
的
位置：绝对
，我得到了我想要的场景，即：


我将在这里添加一段代码，以便我们可以使用它

干杯

PS：我认为标签应该是加载条，但我无法创建新标签，所以我将其添加为进度条

编辑：我已经在Chrome上做了这个测试，@Oriol提到它在FF中工作得很好。我已经检查过了，FF确实按照我想要的方式显示了它。我用Safari检查过，它显示的和Chrome一样。到目前为止，这个问题是针对Chrome和Safari的。还没有用IE检查过（害怕）。
这似乎是一个Chrome的bug，由
位置：相对
引起

比照

然后你可以用

#progress {
    margin-top:-8px;
}​

#loading_bar>div {
  border-radius:7px;
  height:100%;
  width:0%;
  margin-top:-8px;
}
#loading_bar>div:first-child {
  margin-top:0;
}

而不是那些
位置：相对
和
位置：绝对

请看这里：

但是，为什么您既有
装载条形图容器
又有
装载条形图

我认为您应该简化代码：

编辑：

如果您想要一个更通用的代码，它不依赖于条数，您可以使用

#progress {
    margin-top:-8px;
}​

#loading_bar>div {
  border-radius:7px;
  height:100%;
  width:0%;
  margin-top:-8px;
}
#loading_bar>div:first-child {
  margin-top:0;
}

然后您只需为每个条设置
背景
和
框阴影

请看这里：

它不是累积的（-8px到第二个条，-16px到第三个条，…），因为当你设置边距时，它不像你设置
位置：相对
和设置
顶部
到-8px，-16px

如果将
margin top:10px
设置为一个元素，它会向下移动10px，但不会与下一个元素重叠（以下所有元素也会向下移动10px）

然后，如果将
边距顶部：-8px
设置为第二个条，则边距向上移动8px，但与下一个条之间没有任何空格（以下所有条也向上移动8px）。
然后，您不必将
边距顶部：-16px
设置为第三个条，您只需要-8px，因为它已经因为第二个条而上升了8px。
对于任何（JS？）正在更新进度条宽度的内容，您可以将其转换为整数，这样您就不必处理小片段。或者，如果你仍然想要x.x%，你可以强迫任何事情。这是javascript。我希望它更灵活。总宽度为660px就是一个例子。所以我真的不想计算它的宽度，以超过边界半径部分。在Firefox上，你的代码运行良好。也许是Chrome bug？嗨@Oriol，你说得对。我忘了检查其他浏览器，但我是用Chrome做的，还有屏幕截图。我现在已经检查了其他浏览器，似乎只有firefox以我想要的方式显示它。而且我还没有检查你的行为。太酷了！已看到
页边距顶部的
小提琴。看起来这样行。我会在我的代码中尝试。是的。我一直想修改代码，删除一些div。不记得为什么我还有一个。我认为这是因为之前的边界或者类似的东西，有一个脚本绑定到了
#loading#u bar
而不是
#loading#u bar
太棒了！创造奇迹。另一件事是，我可以使用负片进行div重叠。我不知道，我认为唯一的方法是使用相对和绝对位置。谢谢再小提琴6：酷！但这是怎么发生的？比如，为什么其他div（bar3,4）只获得了利润率最高的-8px，却处于同样的位置？它不应该是累积的吗？@index一开始我不太喜欢这个解决方案，因为我也这么认为，但后来我意识到我们可以将
边距顶部：-8px
设置为所有条（而不是第一条），因为它是边距。我已经编辑了我的答案并添加了解释。