Chrome中的圆角 - 角落中的外部线条

Question

我正在解决导致Chrome，IE浏览器中圆角出现的无关线的原因。它不会发生在FF中。

div.round-box {
  border-bottom: 1px solid #b3b3b3;
  height: 20px;
  margin-bottom: 15px;
  text-align: center;
  width: 100%;
}

div.round-box .steps {
  background-color: #0fa862;
  border: 20px solid white;
  border-radius: 32px;
  color: white;
  font-size: 1.7em;
  padding: 15px 25px;
  position: relative;
  outline: none;
  text-decoration: none;
  top: 10px;
  white-space: nowrap;
  -webkit-border-radius: 32px;
}

<div class="round-box">
  <a class="steps" href="steps">Follow 5 Easy Steps to Install XYZ</a>
</div>

非常感谢任何提示。

Answer 1

它看起来像浏览器渲染/消除锯齿中的错误。它正在绘制白色边框元素下方的绿色背景，并且有一点是边缘渗出。可以通过再次包裹内部元素来解决，这样绿色只能在边框内绘制。

div.round-box {
  border-bottom: 1px solid #b3b3b3;
  height: 20px;
  margin-bottom: 15px;
  text-align: center;
  width: 100%;
}
div.inner-box {
  display: inline-block;
  border: 20px solid white;
  border-radius: 32px;
  -webkit-border-radius: 32px;
}
div.round-box .steps {
  display: block;
  background-color: #0fa862;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  color: white;
  font-size: 1.7em;
  padding: 15px 25px;
  outline: none;
  text-decoration: none;
  white-space: nowrap;
}

<div class="round-box">
  <div class="inner-box">
    <a class="steps" href="steps">Follow 5 Easy Steps to Install XYZ</a>
  </div>
</div>

Answer 2

这个真的很有帮助：
添加background-clip: padding-box;
到.steps