我有樣式 HTML 5 進度標簽。并洗掉了默認樣式，但是我不確定為什么邊框和填充區域之間存在小間隙。請看下面的截圖。
請幫我消除填充的深藍色區域和紅色邊框之間的 1px 間隙。
Stackblitz 網址：https ://stackblitz.com/edit/angular-ivy-qgwxn1 ？
uj5u.com熱心網友回復：
使用 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; */
}
uj5u.com熱心網友回復：
.progress-bar-comp {
display: flex;
flex-direction: column;
}
.progress-line {
display: flex;
align-items: center;
}
progress[value] {
flex-grow: 1;
margin-right: 0.5rem;
height: 10px;
border-radius: 5px;
overflow: hidden;
border: 1px solid red;
}
progress[value]::-webkit-progress-bar {
background: white;
overflow: hidden;
}
progress[value]::-webkit-progress-value {
background: var(--valColor);
padding:none;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/395754.html
上一篇：google.script.run.withSuccessHandler可以回傳區域嗎？
下一篇：未應用字體粗細