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

Question

我有一个按钮，当它悬停在上面时，它周围会显示一个灰色边框。 (我在悬停时添加 .hovered)

当我这样做时，边框的 Angular 落仍然显示一些背景色。

我不确定这是什么原因。

我的代码:

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

Demo(没有悬停功能，对这个问题不重要):

https://jsfiddle.net/zfmjL9gr/

Answer 1

这似乎是由于 border-radius

导致的像素舍入导致的标准抗锯齿

背景延伸到边框之下。您通常看不到它们，因为边框颜色遮住了它们。

但是，您可以通过首先添加默认的透明 边框(这样按钮不会改变大小)并应用background-clip:padding 来阻止背景在边框下可见-box 到 anchor 。

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>