css3的一些兼容问题

让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支持度的因素,以上只是自己平时做的一些方法,不对之处请各位多多包含,大家可以相互多多交流。

时间: 2024-08-05 15:02:52

css3的一些兼容问题的相关文章

CSS3之flex兼容写法

很久不写博文,之前的长时间不上都关闭了,但随着工作时间长越来越长,对知识的积累和总结还真的是很重要的.所以奉劝码农们每天都还是要抽出来一点时间总结点东西,以后对你受益匪浅!!今天还是变谈CSS3里的flex怎么处理兼容的 flex是个非常好用的属性,如果说有什么可以完全代替 float 和 position ,那么肯定是非它莫属了,虽然现在低版本浏览器不支持,可是对于移动来说兼容性不是问题,可是在安卓4.3以后版本里.那就不好用了,今天咱们就说下如果写flex才能保证兼容性. flex之所以有兼

CSS3 background-size属性兼容

background-size是CSS3新增的属性,但是IE8以下还是不支持 background-size:contain; // 缩小图片来适应元素的尺寸(保持像素的长宽比):background-size :cover; // 扩展图片来填满元素(保持像素的长宽比):background-size :100px 100px; // 调整图片到指定大小: background-size :50% 100%; // 调整图片到指定大小,百分比相对于包含元素的尺寸. 浏览器兼容: IE 和遨游不

CSS3属性的兼容 什么是弹性和布局

CSS3新特性,兼容性,兼容方法总结 css3手册css3手册 边框 border-radius 用于添加圆角效果 语法: border-radius:[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?<length>:用长度值设置对象的圆角半径长度.不允许负值<percentage>:用百分比设置对象的圆角半径长度.不允许负值 实例: bo

IE中的CSS3不完全兼容方案

到Internet Explorer 8为止,IE系列是不支持CSS3的.在IE中要做一些常用的效果如圆角.阴影,就需要用一些冗余而无意义的元素和图片来做出这些效果.在厌倦这些后,就 想着用更为简洁.直接有效.CSS3式的办法来解决这些问题.好在就算是饱受批评的Internet Explorer,其本身也是足够强大的.IE特有的技术可以很好的实现一些CSS3的效果. Opacity透明度 元素的透明度在IE中可以很方便的用滤镜来实现. 1        background-color:gree

针对css3特性浏览器兼容 封装less

//--------------------------------------------------- // LESS Prefixer //--------------------------------------------------- // // All of the CSS3 fun, none of the prefixes! // // As a rule, you can use the CSS properties you // would expect just by

H5/CSS3 media queries 兼容IE

在html页面中我们经常看到 <!--[if lt IE 9]>    //判断当前浏览器的版本是否小于IE 9 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js">

CSS3背景色透明(兼容IE8)

标准浏览器通过rgba()实现背景色透明;IE8以下浏览器通过特有滤镜实现背景色透明. 代码如下: 1 1 /* IE8 */ 2 2 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000); 3 3 4 4 /* 标准浏览器 */ 5 5 background-color: rgba(0, 0, 0, 0.6); 上述代码中: 7F000000(十六进制):

关于通过addClass与removeClass用jquery控制有良好兼容的CSS3样式

hi:)好久不见~最近被jquery的animate对某些CSS3特性不兼容搞的头晕眼花,果断百度,阅读了一些高手的博客后突然发现平常很少用到的addClass和removeClass属性居然还可以这么用,真实孤陋寡闻,核心思想是通过CSS3写出可以兼容各项浏览器的标签代码,再写出需要完成的效果(角度rotate,平移translate,切变transform()所谓切变,其实就是把图像的顶部或底部推到一边.缩放scale)通过JQ写出事件被触发时需要调用的addClass,removeClas

纯CSS3打造七巧板

原文:纯CSS3打造七巧板 最近项目上要制作一个七巧板,脑子里瞬间闪现,什么...七巧板不是小时候玩的吗... 七巧板的由来 先来个科普吧,是我在查资料过程中看到的,感觉很有意思. 宋朝有个叫黄伯思的人,对几何图形很有研究,他热情好客,发明了一种用6张小桌子组成的“宴几”——请客吃饭的小桌子.后来有人把它改进为7张桌组成的宴几,可以根据吃饭人数的不同,把桌子拼成不同的形状,比如3人拼成三角形,4人拼成四方形,6人拼成六方形……这样用餐时人人方便,气氛更好.后来,有人把宴几缩小改变到只有七块板,用