代码之家 › 专栏 › 技术社区 › Snappysites

进度条上的边框图像切片效果?

progress-bar twitter-bootstrap css html

Snappysites · 技术社区 · 7 年前

我有一个简单的引导进度条,我想对其使用切片效果,类似于 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

1 回复 | 直到 7 年前

Temani Afif 7 年前

我会考虑将线性gradeint作为背景,您可以轻松调整以创建所需的间距:

.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>