3

我正在尝试使用 CSS3border-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.

有没有解决这个问题的轻量级方法（不引入modernizr或类似的javascript检查）？

4

3 回答 3

0

似乎新版本的 FF 支持这两个border-image参数并且一个覆盖另一个。

尝试颠倒这些行的顺序： 

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

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

于 2012-09-03T13:02:32.327 回答
0

将边框图像更改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;

在线边框图像生成器

于 2012-08-27T17:11:21.023 回答
0

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 中显示漂亮的按钮。较旧的浏览器回退没有边缘。

于 2012-08-27T17:21:24.297 回答