浏览器内核(浏览器的解析代码机制)
ie浏览器 Trident内核 -ms-火狐浏览器 Gecko内核 -moz-欧鹏浏览器 Blank内核 -o-谷歌浏览器 Webkit内核 -webkit-
过渡的兼容写法
transition: all 1s
;
-moz-transition: all 1s
;
-webkit-transition: all 1s
;
渐变 ie9及以下不支持
线性渐变：background-image/background:linear-gradient(渐变方向,颜色1,颜色2……)
方向 设置方向一定要加 to
to bottom; 向下 background-image: linear-gradient(to bottom, red, yellow, blue, green);
to top; 向上to left 向左to right 向右to right top 右上角to right bottom 右下角to left top 左上角to left bottom 左下角数值+deg background-image: linear-gradient(45deg, red, yellow, blue, green);
重复性的线性渐变 background-image/background: repeating-linear-gradient(渐变方向,颜色1,颜色2……)
.box2 {
background-image: repeating-linear-gradient(red 10px, blue 50px
);
font-size: 50px
;
line-height: 50px
;
}
径向渐变 background-image/background:radial-gradient(方向,颜色值1,颜色值2……)
方向：和背景图的位置取值一样，设置方向一定要加浏览器前缀，否则不生效
background-image: -webkit-radial-gradient(left top, red, yellow
);
重复性的径向渐变 background-image: repeating-radial-gradient(方向, 颜色值1,颜色值2……);
background-image: repeating-radial-gradient(blue, red 20px
);
2d变形 transform:位移|旋转|缩放|倾斜
位移
transform:translateX(数值+px) 向右和向下为正数transform:translateY(数值+px) 向右和向下为正数两个方向同时位移
transform: translateX(100px
) translateY(-100px
);
transform: translate(100px,-100px
);
写一个值代表的是x轴的位移
transform: translate(100px
);
移动之后，原来的位置依旧存在利用位移实现水平垂直居中
优点：不论大盒子和小盒子的宽高如何变化，都能够识别到宽高的百分比
.box{
position:absolute
;
left:50%
;
top:50%
;
transform:translate(-50%,-50%
); 百分数参考的是当前盒子的宽高
}
旋转
x轴的旋转 transform:rotateX(数值+deg)y轴的旋转 transform:rotateY(数值+deg)z轴的旋转 transform:rotateZ(数值+deg) 顺时针是正数，逆时针是负数只写一个值： transform: rotate(-600deg); 代表的是z轴的旋转位移和旋转同时存在 表示先位移后旋转
transform: translateX(300px
) rotateZ(90deg
);
先旋转，坐标轴会跟着变化，位移会根据新的坐标轴去移动
transform: rotateZ(90deg
) translateX(300px
);
缩放
x轴的缩放 transform:scaleX(数值) 1：正常 0-1之间是缩小 >1是放大y轴的缩放 transform:scaleY(数值) 1：正常 0-1之间是缩小 >1是放大两个方向都有
div{
transform: scaleX(0.4
) scaleY(2
);
transform: scale(0.4, 2
);
transform: scale(2
);
}
倾斜
x轴的倾斜 transform:skewX(数值deg)y轴的倾斜 transform:skewY(数值deg)xy轴的倾斜
div{
transform: skew(40deg, 50deg
);
}
一个值代表的只是x轴的倾斜 变形原点：transform-origin:水平 垂直
水平：left/center/right 垂直：top/center/bottom数值+px百分比
利用外部样式表写过渡属性存在的问题及解决
问题：利用外部样式表写过渡属性可能会在页面初始的时候就有过渡效果解决：给整个结构也就是html的标签下面添加
过渡属性对 display:none到display:block是不生效的
