【问题标题】：Exchanged colors of opaque border on gradient background在渐变背景上交换不透明边框的颜色
【发布时间】：2014-05-02 11:23:45
【问题描述】：

我尝试将不透明边框应用于具有渐变背景的 div。然而，结果出乎我的意料，因为顶部和底部的颜色似乎已经交换了。

html:

<div>
    Test
</div>

css:

div {
    background: -moz-linear-gradient(center top , blue, red);
    background: -webkit-linear-gradient(top , blue, red);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

http://jsfiddle.net/dULyt/

【问题讨论】：

标签： html css background gradient rgba

【解决方案1】：

更新

使用 background-size 属性设置为大于 100%（例如 110%）

DEMO

div{
    background: -moz-linear-gradient(center top , blue, red);
    background: -webkit-linear-gradient(top , blue, red);
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-size:110%;
}

这不是“交换”或任何东西。背景只是在重复。
您必须将 no-repeat 添加到您的 background 属性中。

DEMO

div {
    background: -moz-linear-gradient(center top , blue, red) no-repeat;
    background: -webkit-linear-gradient(top , blue, red) no-repeat;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

【讨论】：

我明白了。但是，使用此解决方案，background 和div 上的边框不再不透明，而是在body 上不透明。不幸的是，这并不是我的想法。有没有办法得到我想要的结果？也许通过给gradient 一个更大的height 2px 左右？
边框呈现在div 之外，而不是在其中。
奇怪的是，如果没有no-repeat，边框会呈现在div 内。或者在那种情况下是div之外的背景？无论如何，这就是我想要的效果，但没有交换颜色。
确实很奇怪。作为一种解决方法，您可以使用background-size。查看更新的答案。

【解决方案2】：

@丹尼尔这里是什么让您更容易制作不透明的边框。使用偏移量为 0 的 box-shadow 属性可以完全满足您的要求。

这是可以帮助您获得所需结果的代码。

div {
    background: -moz-linear-gradient(center top , blue, red) no-repeat;
    background: -webkit-linear-gradient(top , blue, red) no-repeat;
    box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.3); 
}

<div>
  Test
</div>

期待你的回复兄弟。

【讨论】：