html - 无法删除 Bootstrap 进度条中的边框

Question

我已经开始使用自定义颜色等创建 Bootstrap 进度条。但是进度条上方出现灰色边框，我无法理解该边框的来源以及如何删除它。

CSS:

.progress-info {
    color: #ffffff;
}
.progress-info {
    padding-top: 34px;
    background-color: #005861;
}
.progress {
    background-color: #F3723F;
    border: 5px solid #F3723F;
    border-radius: 4px;
    height: 18px;
}
.progress-second {
    background-color: #45BDA1;
    border: 5px solid #45BDA1;
}

HTML:

<div class="progress-info" data-bind="with: $data.statistics">
    <div class="row">
        <div class="col-md-4">Your score</div>
        <div class="progress col-md-6">
            <div class="progress-bar progress-bar-score" role="progressbar" aria-valuemin="0" aria-valuemax="100" data-bind="style: {width: $data.score}" style="width: 6%;"></div>
        </div>
        <div class="col-md-2" data-bind="text: $data.score">6%</div>
    </div>
    <div class="row">
        <div class="col-md-4">Progress</div>
        <div class="progress progress-second col-md-6">
            <div class="progress-bar progress-bar-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" data-bind="style: {width: $data.score}" style="width: 6%;"></div>
        </div>
        <div class="col-md-2"><span data-bind="text: $data.success_cnt">2</span>&nbsp;/&nbsp;<span data-bind="text: $data.attempts">35</span>
        </div>
    </div>
</div>

JsFiddle

Answer 1

那不是边框。它是一个 box-shadow。您只需要将 box-shadow: none; 给 .progress。

Jsfiddle

.progress {
    height: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    box-shadow: none;
}