CSS:在背景图像右侧的梯度麻烦

Question

这必须仅适用于firefox。

当前CSS是：

.statusoverbutton>button{
    background:url(../html/my-bg.png);
    width:242px;
    height:54px;
    border:0;
    float:left;
    color:#a97a30;
    font-size: 16px;
}

目标：我正在尝试将梯度仅添加到背景图像的正确边框。我从这里从这里生成的CSS玩弄了http://www.colorzilla.com/gradient-editor/：

border-image-right: -moz-linear-gradient(top, #1e5799 0%, #c3c4bc 0%, #a4b8b5 50%, #c3c4bc 100%);

做到这一点的正确方法是什么？

Answer 1

正确的方法是

border-image-slice: 0% 100% 0% 0%;
border-image-width: 0em 4em 0em 0em;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: round round;
border-image-source: linear-gradient(90deg, #1e5799 0%, #c3c4bc 0%, #a4b8b5 50%, #c3c4bc 100%);

但是，正如Gcyrillus所说，它将在Chrome和IE中起作用，但在FF

上不行

如果边框形象 - 源是图像（我的意思是）

，它将在FF中使用。

您的方式（现在）将有2个不同的背景。