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

如果border-image-source是图像（文件图像，我的意思是）

，它将在FF中工作

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

CSS：背景图像右侧的渐变问题

1 个答案: