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

Question

我正在尝试使用 CSS3 border-image 进行简单的按钮设计:图像的左切片应该是文本的左边框，右切片应该是右边框，而中间切片应重复(或拉伸(stretch) - 无关紧要)作为背景。对于不支持 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 属性的图像将与边框重叠并弄乱按钮。

是否有解决此问题的轻量级方法(无需引入 modernizr 或类似的 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