html - 在 HTML 5 进度元素中获取差距

Question

我有样式 HTML 5 进度标签。并删除了默认样式，但是我不确定为什么边框和正在进行的填充区域之间存在小间隙。请看下面的截图。

请帮我去掉填充的深蓝色区域和红色边框之间的 1px 间隙。

Stackblitz 网址:https://stackblitz.com/edit/angular-ivy-qgwxn1 ？

Answer 1

使用 height 100% 填充空白，border to box-shadow 方法完全去除任何剩余的空间，

progress[value] {
  flex-grow: 1;
  margin-right: 0.5rem;
  /* Reset the default appearance */
  -webkit-appearance: none;
  appearance: none;
  height: 100%;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 0 0 1px red;
  /* border: 1px solid red; */
}