进度条上的边框图像切片效果？答案

【问题标题】：Border-image-slice effect on Progress Bar?进度条上的边框图像切片效果？
【发布时间】：2018-02-26 09:57:34
【问题描述】：

我有一个简单的引导进度条，我想在其上使用切片效果，类似于border-image-slice CSS 样式。显然，我不能使用这个 CSS，因为进度条没有使用边框。

<div class="progress progress-xs" style="width:60%; background-color:#343F54;">
  <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%; background-color:#2A6EBB;">
    <span class="sr-only">60%</span>
  </div>
</div>

我试图在进度条的每 10% 处获得一个 5px 左右的透明间隙，这可能吗？这是一个例子：

根据要求，我有一个例子Fiddle

【问题讨论】：

你能提供你在 sn-p 或 fiddle 中的进度条演示吗？
当然，这里是：jsfiddle.net/cgtm5qx2

标签： html css twitter-bootstrap progress-bar

【解决方案1】：

我会考虑使用线性渐变作为背景，您可以轻松调整它以创建所需的间隙：

.progress-bar,.progress{
  background:linear-gradient(to right,#fff 5%,transparent 0) 0 0/ 100px 100% ;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="progress progress-xs" style="background-color:#343F54;">
                <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%; background-color:#2A6EBB; border-color:#343F54; border-width:5px;">
                  <span class="sr-only">60%</span>
                </div>
              </div>

【讨论】：

是的，这完全符合我的要求，而且是一个非常简单的解决方案 - 感谢您的帮助！