为什么这个渐变没有覆盖整个元素？答案

【问题标题】：Why does this gradient not cover the entire element?为什么这个渐变没有覆盖整个元素？
【发布时间】：2013-06-07 22:45:41
【问题描述】：

我有以下 CSS：

<a class="button">
    <span>Y</span>
</a>

    .button {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
    background-color: #206CAF;
    background: -moz-linear-gradient(top,rgba(255,255,255,0.1) 0,rgba(0,0,0,0.1) 100%) repeat scroll 0 0 #206CAF;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,255,255,0.1)),color-stop(100%,rgba(0,0,0,0.1)));
background: -webkit-linear-gradient(top,rgba(255,255,255,0.1) 0,rgba(0,0,0,0.1) 100%) repeat scroll 0 0 #206CAF;
background: -o-linear-gradient(top,rgba(255,255,255,0.1) 0,rgba(0,0,0,0.1) 100%);
background: -ms-linear-gradient(top,rgba(255,255,255,0.1) 0,rgba(0,0,0,0.1) 100%);
background: linear-gradient(top,rgba(255,255,255,0.1) 0,rgba(0,0,0,0.1) 100%);
    border-color: -moz-use-text-color -moz-use-text-color rgba(0, 0, 0, 0.2);
    border-image: none;
    border-radius: 2px 2px 2px 2px;
    border-style: none none solid;
    border-width: 0 0 1px;
    box-shadow: 0 1px 1px rgba(50, 50, 50, 0.15);
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    line-height: 12px;
    outline: 0 none;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
}

在 chrome 和 safari（mac 和 windows）和 IE 9（windows）上，整个框不会被渐变覆盖，底部有一些空白。我的代码有问题还是应该是这样？

在此处查看小提琴：http://jsfiddle.net/VmTks/

【问题讨论】：

标签： css google-chrome webkit gradient

【解决方案1】：

IE/Chrome/Safari 和 Firefox 的差异是由这条规则造成的：

border-color: -moz-use-text-color -moz-use-text-color rgba(0, 0, 0, 0.2);

您需要删除 -moz 前缀属性，并且该行为将在浏览器之间保持一致。 Chrome、Safari（我假设是 IE）毫不奇怪地将该规则视为无效。您可以通过带有删除线的border-color 属性在 Chrome 的开发者工具中看到这一点。

http://jsfiddle.net/VmTks/4/

【讨论】：

啊....因此我的边框没有删除它。您是如何看到 Chrome 将其声明为无效的。
Chrome 开发者。工具 - 您将看到 border-color 属性的划线
我明白了。我认为它只删除了被取代的声明，而不是被忽略的声明。很高兴知道。所以他设置了无边框，但出于某种原因只使用了供应商前缀。
值得注意的是，边框默认从文本继承颜色。除非父元素有边框，否则可以指定border-color: inherit inherit rgba(0, 0, 0, 0.2);

【解决方案2】：

我添加了border-bottom: none，它为我修复了它。当我删除您的颜色声明时，我看到它删除了白条，所以我认为它与文本有关。我不确定为什么，但我只是弄乱了不同的，直到我被删除。我一开始以为是下划线，但我发现它已经在那里了。

【讨论】：

你是说这个吗：-moz-border-bottom-colors: none;
我不知道你为什么要这样声明。如果您想要没有边界，只需：border: none;。为什么-moz- 前缀？并且 div 默认没有边框，所以为什么要声明任何东西。我相信你可以声明没有颜色、图像、样式或宽度的边框半径。

【解决方案3】：

我相信这条线

background: linear-gradient(top,

应该是

background: linear-gradient(to bottom,

但我不是 100% 确定 - 如果不是，请道歉！

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

【讨论】：