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

由于border-radius

导致像素舍入，这似乎是标准的抗锯齿

背景延伸至边界并位于边界之下。您通常无法看到它们，因为边框颜色会遮挡它。

但是，您可以通过首先添加默认的透明边框（因此按钮不会更改大小）并将background-clip:padding-box应用到边框来阻止背景在边框下可见锚。

Background-clip @ MDN并且得到了很好的支持。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: