Umrandung Schaltfläche zeigt ein bisschen von der Hintergrundfarbe

Question

Ich habe eine Schaltfläche, die eine graue Grenze um es zeigen wird, wenn es über schwebt. (Ich füge .hovered hinzu, wenn ich darüber schwebte)

Wenn ich dies tue, zeigt der Rand immer noch ein bisschen von der Hintergrundfarbe in den Ecken.

Ich bin nicht sicher, was die Ursache dafür ist.

Mein Code:

  > 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; 
       } 
      } 

schwebt:

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

Demo (ohne Hover-Funktion, nicht wichtig für dieses Problem):

https://jsfiddle.net/zfmjL9gr/

Answer 1

Diese Norm zu sein scheint Anti-Aliasing aufgrund von Pixelrundung als Ergebnis der border-radius

Hintergründe erstrecken sich auf und sind unter den Grenzen. Sie können sie normalerweise nicht sehen, weil die Rahmenfarbe sie verdeckt.

jedoch können Sie den Hintergrund aus sichtbar ist unter der Grenze stoppen, indem zuerst eine Standard transparent Grenze Hinzufügen (so die Taste ändert sich nicht, Größe) und background-clip:padding-box an den Anker angelegt wird.

Background-clip @ MDN und hat eine hervorragende Unterstützung.

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>