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 */
}

background属性中的图片将与边框重叠，并且会为支持border-image的浏览器设置按钮。

是否有解决此问题的轻量级方法（不引入现代化或类似的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;

通过这种方式，支持这两个参数并使用后者覆盖一个参数的浏览器将采用带填充的版本。

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

3 个答案: