9

我偶然发现了一些奇怪的东西。当对元素应用白色虚线边框时，背景渐变的颜色会出现在元素的错误一侧，如下所示：

错误的边框颜色

我在最新版本的 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');

}

左侧和右侧的边框颜色很好，但由于几乎每个浏览器都会发生这种情况，我不得不假设这是我的错误，而不是浏览器错误。我在这里想念什么？

4

1 回答 1

6

您可以通过设置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;
}
于 2012-07-30T09:05:20.640 回答