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

问题描述：

我试图使用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浏览器。

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

您正在使用的图像很重要。所以给我们那 –

你的平均按钮图像，一个带圆角的矩形，在白色背景上。我不明白为什么它应该重要。 – Tgr

@Tgr你解决了你的问题吗？解决方案在这里吗？ – amotzg

答

改变边界图像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

甚至更多地弄乱了按钮。 – Tgr

答

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加上漂亮的按钮。旧的浏览器后退没有边缘。

答

看来，新版本的FF支持border-image参数和一个覆盖另一个。

尝试扭转这些行的顺序，那么：

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

通过这种方式，同时支持参数，并覆盖一个与后来将采取与填充版本的浏览器。

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

相关推荐