我试图使用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