Bootstrap 进度条自定义边框半径

Question

我有以下片段：

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

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

Answer 1

由于 .progress class 中的边框 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>

Bootstrap 进度条自定义边框半径

Bootstrap progress bar custom border radius

html

css

progress-bar

twitter-bootstrap-3