使用边框半径时出现白线

Question

当我应用border-radius时，我有一个输入框，输入框和边框之间有一个空白区域。

不确定为什么会出现。请帮忙

注意：我正在使用bootstrap 3

.form-control {
  padding: 0 8px;
  line-height: 24px;
  font-size: 12px;
  font-weight: bold;
  border: 2px solid #1d79d1;
  color: #1d79d1;
  min-width: 96px;
  height: 32px;
  border-radius: 32px;
  background-color: #1d79d1;
}

<input class="form-control filter-button selectedBorder">

Answer 1

删除边框，因为您同时给边框和边框赋予相同的颜色

Answer 2

由于您的边框颜色和背景颜色相同：移除边框并增加高度或填充以补偿边框的高度。

  .form-control {
  padding: 0 8px;
  line-height: 24px;
  font-size: 12px;
  font-weight: bold;
  color: #1d79d1;
  min-width: 96px;
  height: 34px;
  border-radius: 32px;
  background-color: #1d79d1;
}

我遇到了类似的问题。输入字段和提交类型可能存在边框和边框半径羽化边框和背景颜色的渲染问题。