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

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