在 HTML 5 个进度元素中取得差距

Question

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

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

Stackblitz URL：https://stackblitz.com/edit/angular-ivy-qgwxn1?

Answer 1

使用高度100%填充空白，边框用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; */
}

在 HTML 5 个进度元素中取得差距

Getting gap in HTML 5 progress element

html

css

progress