如何将 modernizr 用于边框图像
How to use modernizr for border-image
我需要支持 IE10,而在我的 CSS 上,我使用的 border-image
在 IE10< 上不受支持。我的 modernizr 已经支持 border-image
,但我不明白如何将它用于我的 class。例如,如果我有一个 class like
.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,我只需要创建一个 class,例如:
.no-borderimage .funz__box { /* my stile */ }
或者我还应该做些什么?
这是一个简单的例子 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
的浏览器中测试它,您会看到变化。
您根本不需要触摸 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
}
我刚在我的网站上使用过它,效果很好
我需要支持 IE10,而在我的 CSS 上,我使用的 border-image
在 IE10< 上不受支持。我的 modernizr 已经支持 border-image
,但我不明白如何将它用于我的 class。例如,如果我有一个 class like
.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,我只需要创建一个 class,例如:
.no-borderimage .funz__box { /* my stile */ }
或者我还应该做些什么?
这是一个简单的例子 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
的浏览器中测试它,您会看到变化。
您根本不需要触摸 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
}
我刚在我的网站上使用过它,效果很好