Chrome中的圆角-角落中的多余线条

Question

我为导致在Chrome（即Safari）中圆角出现多余线条的原因而what之以鼻。 它在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