一、渐变
最近开发页面使用到了css渐变和border-radius 属性,最初只是百度了一下方法,后经测试,在IE9中并不生效,又开始解决;
菜鸟驿站上标明了浏览器兼容
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
后边跟 -webkit-、-moz- 或 -o- 的数字指定了需加上前缀才能支持属性的第一个版本。
属性 | IE | GROME | firefox | safari | 欧朋 |
---|---|---|---|---|---|
linear-gradient | 10.0 | 26.0 10.0 -webkit- | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.1 -o- |
radial-gradient | 10.0 | 26.0 10.0 -webkit- | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.6 -o- |
repeating-linear-gradient | 10.0 | 26.0 10.0 -webkit- | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.1 -o- |
repeating-radial-gradient | 10.0 | 26.0 10.0 -webkit- | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.6 -o- |
可见IE10及以上浏览器才支持css3渐变语法,grome没问题,firefox及其他为保险起见加上前缀,亲测只有IE9有问题;
渐变分线性渐变和径向渐变,还可以设置渐变角度,具体想实现哪种不再赘述,可以百度自行查找,以以线性(对角渐变-从左上角到右下角)为例,说一下兼容性;
基本写法:
#grad {
background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
}
我百度找到了兼容IE9及以下的渐变(貌似通过过滤实现)语法,但貌似并不能实现对角渐变,只有垂直和水平渐变,只能先用着了,如有可以解决方案,还请提供;
filter:alpha(opacity=100 finishopacity=100 style=1 startx=0,starty=0,finishx=500,finishy=500) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#8d9bf1,endcolorstr=#bf51e7,gradientType=0);
-ms-filter:alpha(opacity=100 finishopacity=100 style=1 startx=0,starty=0,finishx=500,finishy=500) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#8d9bf1,endcolorstr=#bf51e7 ,gradientType=0);/*IE8*/
startcolorstr为开始颜色,endcolorstr为结束颜色 ,gradientType=1水平渐变(0垂直渐变)
二、border-radius
w3cschool上兼容性
浏览器支持
IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。
但不知道为啥我的IE9就不支持,亲测;对于不支持圆角属性的ie浏览器(暂且定为IE8及以下),可以通过引入ie-css3.htc(下载的插件)或PIE.htc文件来解决该问题(百度的),个人觉得为个圆角属性如此折腾没有必要,有必要的话可以试一下(我没试过)。
综合写法
1:下载.htc文件;
2:使用behavior通知浏览器调用脚本,总的写法如下:
box {
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari 和 Chrome */
border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
behavior: url(ie-css3.htc); /* 兼容IE8及以下*/
}