为什么在应用背景渐变时会反转边框颜色？

Question

我偶然发现了一些奇怪的事情。将虚线白色边框应用于元素时，背景渐变的颜色显示在元素的错误一侧，如下所示：

我在最新版本的Firefox，Chrome，Opera和IE10中看到了这一点。然而，IE9有我的意图。

我的css目前是：

aside.block { 

    width:                  259px;
    padding:                12px;
    margin:                 15px 0;

    border:                 2px dashed #fff;

    background-image:       -o-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
    background-image:       -moz-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
    background-image:       -webkit-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
    background-image:       -ms-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
    background-image:       linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
    filter:                 progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec00', endColorstr='#dbcb00');

}

左侧和右侧的边框颜色很好，但由于这几乎发生在每个浏览器中，我将不得不假设这是我的错误，而不是浏览器错误。我在这里缺少什么？

Answer 1

您可以将background-origin设置为border-box来解决此问题。

http://jsfiddle.net/LVfqe/11/

.block{
        width:                  259px;
        padding:                12px;
        background-image:       -o-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
        background-image:       -moz-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
        background-image:       -webkit-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
        background-image:       -ms-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
        background-image:       linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec00',endColorstr='#dbcb00');
border:                 2px dashed #fff;
background-origin:border-box;
}