html - 渐变背景上不透明边框的交换颜色

Question

我尝试将不透明边框应用于具有渐变背景的 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/

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

---

这不是“交换”或任何东西。背景只是 self 重复。
您必须将 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);
}