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

Question

我有一个简单的bootstrap进度条，我想使用切片效果，类似于import UIKit class cvViewController: UIViewController, UICollectionViewDataSource, UIImagePickerControllerDelegate, UINavigationControllerDelegate, UICollectionViewDelegate { @IBOutlet var collectionView: UICollectionView! override func viewDidLoad() { super.viewDidLoad() collectionView.delegate = self collectionView.register(UINib.init(nibName: "Cell", bundle: nil), forCellWithReuseIdentifier: "Cell") if let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout { flowLayout.estimatedItemSize = CGSize(width: 1,height: 1) } loadAPI(Page: 1) //display data scrollDownButton.clipsToBounds = true scrollDownButton.layer.cornerRadius = 15 sendButton.addTarget(self, action: #selector(cvViewController.sendMessage), for: .touchDown) //push a new data } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } override func viewDidAppear(_ animated: Bool) { super.viewDidAppear(animated) scheduledTimerWithTimeInterval() if move == 0{ scrollToBottomAnimated(animated: true) } scrollDownButton.addTarget(self, action: #selector(cvchatViewController.scrollToBottomAnimated), for: .touchDown) //it will display last item on screen flowLayout.scrollDirection = .vertical } func scrollToBottomAnimated(animated: Bool) { guard self.collectionView.numberOfSections > 0 else{ return } let items = self.collectionView.numberOfItems(inSection: 0) if items == 0 { return } let collectionViewContentHeight = self.collectionView.collectionViewLayout.collectionViewContentSize.height let isContentTooSmall: Bool = (collectionViewContentHeight < self.collectionView.bounds.size.height) if isContentTooSmall { self.collectionView.scrollRectToVisible(CGRect(x: 0, y: collectionViewContentHeight - 1, width: 1, height: 1), animated: animated) return } self.collectionView.scrollToItem(at: NSIndexPath(item: items - 1, section: 0) as IndexPath, at: .bottom, animated: animated) } public func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return chatPages.count } public func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! Cell cell.vNameLabel.text = chatPages[indexPath.row].username cell.VCDateLabel.text = chatPages[indexPath.row].timeSent cell.vImageSend.image = UIImage(named: "1x1px") return cell } func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool { return true } CSS样式。显然，我不能使用这个CSS，因为进度条没有使用边框。

border-image-slice

我试图获得一个小的5px左右，每10％的进度条透明差距，这可能吗？这是一个例子：

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

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