CSS3渐进增强解决方案

最近的项目需求中频繁的需要做兼容性处理，查阅了很多资料，最有含金量的当属w3help.org/jdshop店铺装修，感谢前辈们栽的树，特地简单的记录常用的css3渐进增强方法，一是方便记忆，二是方便以后查阅修改，如果那里有不妥的地方，望指正。

opacity

兼容方案

/* 方案一 */
.opacity{
    opacity: 0.5;                                                     /*ie9+、现代浏览器*/
    filter:alpha(opacity=50);                                         /*ie6/7/8/9*/
}
/* 方案二 */
.opacity{
    opacity: 0.5;
    filter:progid:DXImageTransform.Microsoft.alpha(opacity=50);       /*ie6/7/8/9*/
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)"  /*ie8/9*/
}
/* IE9下避免重复 */
:root .opacity{filter:none;}

使用说明

1. opacity不同于rgba，会连同该元素的所有子元素一起变透明。
2. 在ie9下，如果opacity和Alpha滤镜同时使用，则Alpha滤镜透明会取代opacity，避免了重复透明的问题。可使用css3的伪类选择符将滤镜的透明度覆盖。

rgba

兼容方案

.rgba{
    background: rgba(255, 0, 0, 0.5); /* ie9+,FF,Safari,Opera,Chrome */
    /* IE6-IE9*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#80FF0000',EndColorStr='#80FF0000'); 
}
:root .rgba{filter:none;}

使用说明

1. ie滤镜中startColorStr和EndColorStr的前两位是Alpha通道值。Alpha通道值为16进制值.
2. 由于10进制范围为0-255，可通过比例算法将rgba透明值转化为10进制值，再将10进制值转化为16进制值，确保ie滤镜的透明度和rgba的透明度一样。如将rgba透明值0.5转化为16进制值：0.5/1=x/255，x约等于128，128/16=8，则16进制值为80。加上rgba的前三个参数的RGB颜色值转换算为十六进制颜色码（如200,0,0转换为十六进制是：FF0000），则startColorStr和EndColorStr处为’#80FF0000’。
3. 同上,在ie9下，使用css3的伪类选择符避免重复申明的问题。

border-radius

兼容方案

.border-radius{
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;/*ie9+、现代浏览器*/
	behavior:url(此处为ie-css3.htc文件的绝对路径);
}
:root .border-radius{behavior:url(错误的ie-css3.htc文件路径);}/*ie6/7/8/9*/

使用说明

1. ie-css3.htc是一个可以是老IE支持css3的某些属性的文件，需要自行下载引用。
2. 只能同时4角圆角，不能单独设置某一个角。
3. 由于ie9既支持border-radis属性，又支持htc这个文件，所以同时使用会造成圆角失效。这里可使用css3的伪类选择符重定义一个错误的路径将htc这个文件路径覆盖，重而使用ie9本身支持的border-radius圆角效果。

box-shadow

兼容方案

/* 引入htc文件的方式 */
.box-shadow{
	-moz-box-shadow:0px 0px 10px #333 inset;/*必须写0px，而不是0*/
	-webkit-box-shadow:0px 0px 10px #333 inset;
	box-shadow:0px 0px 10px #333 inset;
	behavior:url(此处为ie-css3.htc文件的绝对路径);
}
:root .border-radius{behavior:url(错误的ie-css3.htc文件路径);}
/* filter方式 */
.box-shadow{
	-moz-box-shadow:0px 0px 10px #333 inset;
	-webkit-box-shadow:0px 0px 10px #333 inset;
	box-shadow:0px 0px 10px #333 inset;
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');
}
:root .box-shadow{filter:none;}

使用说明

1. htc文件模拟的阴影只读取了box-shadow里面设置的模糊半径值，且效果和box-shadow的效果有差异。
   不支持inset内阴影。
   阴影在IE中只会显示为黑色，不管你设置成其它什么颜色。
2. ie9下，如果box-shadow设置了inset属性，htc文件会造成元素的背景色失效，所以这里可使用css3的伪类选择符重定义一个错误的路径将htc这个文件路径覆盖，重而使用ie9本身支持的box-shadow内部阴影效果。
3. 同样，引用filter方法也应该去重filter。

text-shadow

text-shadow的用法参考博主 水木 的这篇博客。有需求的时候记得来感谢感谢。

transform

直接看W3C的说明文档transform

transition

transition

animation

animation