如何从 html 进度条样式中删除垂直线答案

【问题标题】：How to remove a vertical line from the html progress bar styling如何从 html 进度条样式中删除垂直线
【发布时间】：2020-10-05 08:54:33
【问题描述】：

我的网页上出现了一个进度条。代码是

progress {
  display: inline-block;
  vertical-align: baseline;
}

.progress-yellow {
  color: #F4DD50;
  border-radius: 4px;
  height: 8px;
  border-left: 4px solid #F4DD50;
  border-right: 4px solid grey;
}

&lt;progress class="progress-yellow" max="100" value="42.0"&gt;&lt;/progress&gt;

用户界面如下所示：

因为它出现在图像上，进度条上有一条垂直线，我不知道如何删除它。当我放大或缩小网页时它会消失，这很奇怪。有什么想法吗？

【问题讨论】：

标签： html css styles progress-bar

【解决方案1】：

你有左边框。这就是为什么你的进度条中有一个边框。如果你想制作一个边框半径样式的进度条，你可以试试这个代码。

第 1 步：

       .progress-bg { 
            background-color: #F4DD50;
            padding: 1%; 
            border-radius: 15px; 
        } 
        
        .progress-width { 
            width: 30%; 
        } 
        
        .progress { 
            background-color: grey; 
            width: 80%; 
            border-radius: 15px; 
        }

<div class="progress">
  <div class="progress-bg progress-width"></div> 
</div>

第 2 步：

.progress-yellow {
  height: 8px;
  border-radius: 30px;
  width:40%;
}
progress[value]::-webkit-progress-bar {
  background-color: grey;
  border-radius: 40px;
}

progress[value]::-webkit-progress-value {
  border-radius: 40px;
  background-color:#F4DD50;
}

&lt;progress class="progress-yellow" max="100" value="42.0"&gt;&lt;/progress&gt;

【讨论】：

我还有一个问题：如果值/颜色组合是动态的，在我的情况下是动态的怎么办。我想根据价值改变颜色。小于 30 应该是绿色，超过 70 是红色。
你可以使用 if-else 条件
progress[value]::-webkit-progress-value 在此类中您可以添加 if else 条件并可以更改背景颜色
如何在css中使用if-else？如果我们不想在 html 页面上创建多个进度条
您使用什么语言进行开发？

【解决方案2】：

border-left: 4px solid #F4DD50; 导致了您的问题。您需要找到适合您的边界半径的解决方法。

【讨论】：