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

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