如何使用现代化的边界图像

Question

我需要支持IE10，在我的CSS上，我使用的是IE10上的border-image <不支持。我的modernizr已经有border-image的支持，但我不明白如何使用它为我的类。例如，如果我有一个类，如>

 .funz__box { border-style: solid;
 border-width: 30px 30px 30px 25px;
 -moz-border-image: url(../i/tmp/border_funz.png) 30 30 30 25;
 -webkit-border-image: url(../i/tmp/border_funz.png) 30 30 30 25;
 -o-border-image: url(../i/tmp/border_funz.png) 30 30 30 25;
 border-image: url(../i/tmp/border_funz.png) 30 30 30 25 fill; }

为了支持IE 10，我只需要创建一个类:

.no-borderimage .funz__box { /* my stile */ }

或者我应该做些什么?

Answer 1

这里有一个使用JQuery的简单示例:

CSS:

.borderimage_class{
    border-style: solid;
    border-width: 30px 30px 30px 25px;
    -moz-border-image: url(../i/tmp/border_funz.png) 30 30 30 25;
    -webkit-border-image: url(../i/tmp/border_funz.png) 30 30 30 25;
    -o-border-image: url(../i/tmp/border_funz.png) 30 30 30 25;
    border-image: url(../i/tmp/border_funz.png) 30 30 30 25 fill;
}
.no_borderimage_class{
    //styles
}

JS:

if(Modernizr.borderimage){
    //true - supports
    $('.some_element_class').addClass('borderimage_class');
}
else{
    //false - doesn't support
    $('.some_element_class').addClass('no_borderimage_class');
}

JSFiddle - <p>根据borderimage的支持改变颜色。在IE10和其他支持borderimage的浏览器中测试一下，你会看到变化。

Answer 2

你根本不需要触摸JQuery -你可以在CSS中完成这一切，你只需要在你想要的样式之前添加.borderimage和.no-borderimage。例如:

.borderimage #header_right{ 
//the CSS you want to apply to element ID header_right when border-image IS supported 
}
.no-borderimage #header_right{ 
//the CSS you want to apply to element ID header_right when border-image is NOT supported 
}
.no-borderimage #header_logo{ 
//some more CSS that I only want applied to element ID header_logo when border-image is NOT supported 
}

我刚在我的网站上用过这个，效果很好