按钮周围的边框显示了一点背景颜色

Question

我有一个按钮，当它被悬停时，它会显示一个灰色的边框。 （我在盘旋时添加了.hovered）

当我这样做时，边框仍然在角落中显示了一些背景色。

我不知道这样做的原因是什么。

我的代码：

  > span.button 
      { 
       margin-left: auto; 
       margin-right: auto; 

       @media (min-width: $screen-xs-min) and (max-width: $screen-sm-min - 1) 
       { 
        bottom: 70px; 
       } 

       @media (min-width: $screen-sm-min) 
       { 
        bottom:55px; 
       } 

       > a 
       { 
        padding: 6px 25px 6px 25px; 

        background: rgba(196,18,21,1); 
        background: -moz-linear-gradient(top, rgba(196,18,21,1) 0%, rgba(194,4,7,1) 0%, rgba(223,21,28,1) 0%, rgba(192,4,7,1) 0%, rgba(223,21,28,1) 0%, rgba(223,21,28,1) 50%, rgba(194,4,6,1) 51%, rgba(194,4,6,1) 100%); 
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(196,18,21,1)), color-stop(0%, rgba(194,4,7,1)), color-stop(0%, rgba(223,21,28,1)), color-stop(0%, rgba(192,4,7,1)), color-stop(0%, rgba(223,21,28,1)), color-stop(50%, rgba(223,21,28,1)), color-stop(51%, rgba(194,4,6,1)), color-stop(100%, rgba(194,4,6,1))); 
        background: -webkit-linear-gradient(top, rgba(196,18,21,1) 0%, rgba(194,4,7,1) 0%, rgba(223,21,28,1) 0%, rgba(192,4,7,1) 0%, rgba(223,21,28,1) 0%, rgba(223,21,28,1) 50%, rgba(194,4,6,1) 51%, rgba(194,4,6,1) 100%); 
        background: -o-linear-gradient(top, rgba(196,18,21,1) 0%, rgba(194,4,7,1) 0%, rgba(223,21,28,1) 0%, rgba(192,4,7,1) 0%, rgba(223,21,28,1) 0%, rgba(223,21,28,1) 50%, rgba(194,4,6,1) 51%, rgba(194,4,6,1) 100%); 
        background: -ms-linear-gradient(top, rgba(196,18,21,1) 0%, rgba(194,4,7,1) 0%, rgba(223,21,28,1) 0%, rgba(192,4,7,1) 0%, rgba(223,21,28,1) 0%, rgba(223,21,28,1) 50%, rgba(194,4,6,1) 51%, rgba(194,4,6,1) 100%); 
        background: linear-gradient(to bottom, rgba(196,18,21,1) 0%, rgba(194,4,7,1) 0%, rgba(223,21,28,1) 0%, rgba(192,4,7,1) 0%, rgba(223,21,28,1) 0%, rgba(223,21,28,1) 50%, rgba(194,4,6,1) 51%, rgba(194,4,6,1) 100%); 
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c41215', endColorstr='#c20406', GradientType=0); 

        border-radius: 10px; 

        color: #ffffff; 
       } 
      } 

徘徊：

&.hovered > span.button a 
{ 
    border: 4px solid #e3e3e3; 
} 

演示（无悬停功能，不是这个问题很重要）：

https://jsfiddle.net/zfmjL9gr/

Answer 1

这似乎是标准作为的结果，由于像素四舍五入造成的抗锯齿

背景扩展到并处于边界之下。您通常无法看到它们，因为边框颜色会遮挡它。

但是，你可以从第一添加默认透明边界是下边框可见停止后台（所以按钮不会改变大小）和应用background-clip:padding-box到锚。

Background-clip @ MDN并且有很好的支持。

body { 
 
    padding: 3em; 
 
} 
 
a { 
 
    padding: 6px 25px 6px 25px; 
 
    text-decoration: none; 
 
    background: rgba(196, 18, 21, 1); 
 
    background: linear-gradient(to bottom, rgba(196, 18, 21, 1) 0%, rgba(194, 4, 7, 1) 0%, rgba(223, 21, 28, 1) 0%, rgba(192, 4, 7, 1) 0%, rgba(223, 21, 28, 1) 0%, rgba(223, 21, 28, 1) 50%, rgba(194, 4, 6, 1) 51%, rgba(194, 4, 6, 1) 100%); 
 
    border-radius: 10px; 
 
    color: #ffffff; 
 
    /* added */ 
 
    border: 4px solid transparent; 
 
    background-clip: padding-box; 
 
} 
 
span.button:hover a { 
 
    border: 4px solid #e3e3e3; 
 
}

<span class="button"><a href="#1">Button</a></span>