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

我尝试将不透明边框应用于具有渐变背景的div。然而，结果对我来说是相当出乎意料的，因为顶部和底部的颜色似乎是互换的

html:

更新 使用

背景大小
属性设置为大于100%（例如110%）



这不是“交换”或什么。背景只是在重复本身。
您必须将
无重复添加到
背景
属性中


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

以下是可能帮助您获得所需结果的代码


div{
背景：-莫兹线性梯度（中间顶部、蓝色、红色）无重复；
背景：-webkit线性渐变（顶部、蓝色、红色）无重复；
盒影：0px 0px 0px 8px rgba（0,0,0,0.3）；
}

试验
我明白了。但是，使用此解决方案，边框在
div
的
背景上不再不透明，而是在
主体上不透明。不幸的是，这并不是我想要的。有没有办法得到我想要的结果？可能是通过
2px
左右给
渐变
一个更大的
高度
来实现的。边框在
div
之外呈现，而不是在它里面呈现。奇怪的是，如果没有
无重复
的话，边框在
div
之内呈现。或者在这种情况下背景是否在
div
之外？无论如何，这就是我想要的效果，但是没有交换的颜色。真的很奇怪。作为一种解决方法，您可以使用
背景大小
。请参阅更新的答案。
<div>
    Test
</div>

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

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

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