不支持边框图像的浏览器的后备背景

Question

我正在尝试使用CSS3 border-image来设计一个简单的按钮:图像的左边部分应该是文本的左边框，右边应该是右边框，中间的部分应该重复(或拉伸-这无关紧要)作为背景。我需要一个后备浏览器不支持border-image -只使用中间切片作为背景，没有边缘将是可以接受的。问题是，如果我这样做：

.button {
    border: solid 1px white;
    border-size: 0 5px;
    background: ('button-slice.png') repeat;
    border-image: url('button.png') 0 5 0 5 fill;
    -moz-border-image: url('button.png') 0 5 0 5;
    /* repeat for other vendor prefixes */
}

对于支持border-image的浏览器，来自background属性的图像将覆盖边框并弄乱按钮。

有没有一种轻量级的方法来解决这个问题(不需要引入现代或类似的javascript检查)？

Answer 1

将边框图像0 5 0 5更改为1 1 5 1：

border-image: url('button.png') 1 1 5 1 fill;
-moz-border-image: url('button.png') 1 1 5 1;

border-image generator online

Answer 2

border-image对于后备是很棘手的。做什么.

.button {
    border: solid 1px white;
    border-size: 0 5px;
    background: ('button-slice.png') repeat;
    background: rgba(0,0,0,0);
    border-image: url('button.png') 0 5 0 5 fill;
    -moz-border-image: url('button.png') 0 5 0 5;
    /* repeat for other vendor prefixes */
}

应该适用于除IE9以外的所有浏览器。

由于您只有一个左右边框，我建议使用伪元素...

.button {
    border: solid 1px white;
    background: ('button-slice.png') repeat;
    position: relative;
}

.button:before, .button:after {
  content: '';
  width: 5px;
  position: absolute;
  height: 100%;
  background: transparent url('button.png') 0 0 no-repeat;
  top: 0;
}

.button:before {left: -5px;}
.button:after {right: -5px;}

这项技术应该可以在所有现代浏览器和IE8中显示漂亮的按钮。较旧的浏览器后退，没有边缘。

Answer 3

新版本的FF似乎同时支持border-image参数和覆盖另一个参数。

尝试颠倒这些行的顺序，如下所示：

-moz-border-image: url('button.png') 0 5 0 5;
border-image: url('button.png') 0 5 0 5 fill;

这样，支持这两个参数并用后一个参数覆盖一个参数的浏览器将采用带有填充的版本。