Bootstrap 进度条自定义边框半径答案

【问题标题】：Bootstrap progress bar custom border radiusBootstrap 进度条自定义边框半径
【发布时间】：2020-02-17 14:01:25
【问题描述】：

我有以下 sn-p ：

.progress-bar{
    border-top-right-radius: 40px !important;
    border-bottom-right-radius: 40px !important;
    -webkit-box-shadow: none !important;
  	-moz-box-shadow: none !important;
	  box-shadow: none !important;
}

.progress{
    border-radius: 40px !important;
    background-color: white !important;
    -webkit-box-shadow: none !important;
	  -moz-box-shadow: none !important;
	  box-shadow: none !important;
    border: 2px solid #337AB7;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div>
</div>

我不明白为什么左边有空白，我想去掉它。

【问题讨论】：

标签： html css twitter-bootstrap-3 progress-bar

【解决方案1】：

这是由于 .progress 类中的边框 CSS 导致的呈现问题。它正在调整其子元素的大小。

在这种情况下，.progress-bar 元素的高度实际上由于 2px 边框（顶部 2px + 底部 2px）而减少了 4px，因此半径的曲率并不完全相同。

相反，您可以使用 box-shadow，因为它不会调整其子元素的大小。

.progress-bar{
    border-top-right-radius: 40px !important;
    border-bottom-right-radius: 40px !important;
    -webkit-box-shadow: none !important;
  	-moz-box-shadow: none !important;
	  box-shadow: none !important;
}

.progress{
    border-radius: 40px !important;
    background-color: white !important;
    
    /* Changes below */
    -webkit-box-shadow: inset 0 0 0 2px #337AB7 !important;
	  -moz-box-shadow: inset 0 0 0 2px #337AB7 !important;
	  box-shadow: inset 0 0 0 2px #337AB7 !important;
    border: none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div>
</div>

【讨论】：