码迷,mamicode.com
首页 > Web开发 > 详细

css3的一些兼容问题

时间:2015-01-24 18:39:00      阅读:189      评论:0      收藏:0      [点我收藏+]

标签:

让div 透明,兼容IE FF

.box{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5; opacity: 0.5;}
       /*透明度兼容*/
.box {  
      filter:alpha(opacity=50);  
      -moz-opacity:0.5;  
      -khtml-opacity: 0.5;  
      opacity: 0.5;  
}   

  

兼容性好的CSS3网页渐变色背景特效代码,适用于IE/火狐、Opera等众多浏览器,学会以使用CSS编写网页背景,可以大大减少网页的资源占用率,提升浏览体验,好处多多。

  /*渐变的兼容*/
.gradient{
    width:300px;
    height:150px;
    filter:alpha(opacity=100 finishopacity=50 style=1 

startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient

(startcolorstr=red,endcolorstr=blue,gradientType=0);
    -ms-filter:alpha(opacity=100 finishopacity=50 style=1 

startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient

(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE8*/	
    background:red; /* 一些不支持背景渐变的浏览器 */  
    background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));  
    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 

0.5)));  
    background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); 
}
<div class="gradient"></div>

  

/*opacity=100 渐变开始的透明度,0代表完全透明,100代表完全不透明。
finishopacity=50 指定结束时的透明度,范围也是0 到 100。
style用来指定透明区域的形状特征:
0 代表统一形状
1 代表线形
2 代表放射状
3 代表矩形。
startx 渐变透明效果开始处的 X坐标。
starty 渐变透明效果开始处的 Y坐标。
finishx 渐变透明效果结束处的 X坐标。
finishy 渐变透明效果结束处的 Y坐标。*/

 

因为IE6/7/8,对css3支持度的因素,以上只是自己平时做的一些方法,不对之处请各位多多包含,大家可以相互多多交流。

 

css3的一些兼容问题

标签:

原文地址:http://www.cnblogs.com/Angelinvestment/p/4246158.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!