CSS3 新属性兼容性测试

css一些新属性得兼容性测试以及IE低版本浏览器怎么兼容得一些写法(一些用法得具体方法,不做具体说明)

记录下来,方便自己以后使用和查看

 1.  border-radius:50%;(圆角)  border-shadow:10px 10px 5px #000;(阴影)

谷歌,火狐,ie9,兼容,ie8以下不兼容,百度下ie-css3.htc,有详细兼容IE低版本得方法

2.background-size:100% 100%;

cover 等比缩放到完全覆盖容器,但有时会超出容器

contain等比缩放到宽度或高度与容器的宽度或高度相等,不会超出容器

auto 背景图原本大小

谷歌,火狐,ie9,兼容,ie8以下不兼容,引入backgroundsize.min.htc兼容文件兼容IE8

3.text-shadow:3px 3px 5px red;

谷歌,火狐,ie10兼容

4.transtion:all 1s  linear 1s; (全部,动画时间 动画方式 动画何时开始执行)

谷歌,火狐,IE10兼容 IE9不兼容

兼容低版本,火狐,Safari,谷歌得方法(IE9一下不知道怎么解决)

-moz-transition:all 1s linear 1s;

-web-transition:all 1s linear 1s;

-o-transition: all 1s linear 1s;

5.animation:first 2s linear;

@keyframes first {
  
  0% {
    right: -116px;
  }

  20% {
    right: 300px;
  }

  40% {
    top: 100px;
    right: 100px
  }

  60% {
    top: 200px;
    right: 300px
  }

  100% {
    top: 0;
    right: 300px
  }
}

谷歌,火狐,IE10兼容 IE9不兼容

兼容低版本,火狐,Safari,谷歌得方法(IE9一下不知道怎么解决)和tranition兼容写法一样

6.transform:rotate scale (旋转,缩放,)倾斜,变形等 

谷歌,火狐,IE9+

 

 

猜你喜欢

转载自www.cnblogs.com/yibadejiu/p/10032320.html