html - Chrome 中的圆 Angular - Angular 上有无关线

Question

我正在绞尽脑汁地想知道是什么原因导致 Chrome、IE 和 Safari 中的圆 Angular 周围出现无关的线条。这在 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>