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+