css3渐变属性兼容性和div圆角属性兼容性

一、渐变

最近开发页面使用到了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及以下*/

}