CSS
1.新增选择器
1.E:nth-child(n) - 匹配元素类型为E且是父元素的第n个子元素
div:nth-child(2)
2.E:first-child 匹配元素类型为E且是父元素的第一个子元素
3.E:last-child 匹配元素类型为E且是父元素的最后一个子元素
4.E > F E元素下面第一层子集
5.E ~ F E元素后面的兄弟元素
6.E + F E元素紧挨着的后面的兄弟元素
2.属性选择器
- E[attr] 含有attr属性的元素
- E[attr='ok'] 含有attr属性的元素且值为‘ok’的
- E[attr^='ok'] 含有attr属性的元素且值开头含有‘ok’的
- E[attr$='ok'] 含有attr属性的元素且值的结尾含有‘ok’的
- E[attr*='ok'] 含有attr属性的元素且值中含有‘ok’的
3.圆角+rgba
- 圆角
设置某一个角的圆角，比如设置左上角的圆角：border-top-left-radius:30px 60px
同时分别设置四个角：border-radius:30px 60px 120px 150px
设置四个圆角相同：border-radius:50% - rgba
1.盒子透明度表示法：
.box
{
opacity:0.1;
/* 兼容IE */
filter:alpha(opacity=10);
}
2.rgba(0,0,0,0.1)前三个数值表示颜色，第四个数值表示颜色的透明度
4.transition动画
- transition-property 设置过渡的属性，比如width height background-color
- transition-duration 设置过渡的时间，比如1s 500ms
- transition-timing-function 设置过渡的运动方式 常用的有linear匀速，ease缓冲运动
- transition-delay 设置动画的延迟
- transition:property duration timing-function delay 同时设置四个属性
5.transform变换
1、translate(x,y) 设置盒子位移
2、scale(x,y) 设置盒子缩放
3、rotate(deg) 设置盒子旋转
4、skew(x-angle,y-angle) 设置盒子斜切
5、perspective 设置透视距离
6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示
7、translateX、translateY、translateZ 设置三维移动
8、rotateX、rotateY、rotateZ 设置三维旋转
9、scaleX、scaleY、scaleZ 设置三维缩放
10、tranform-origin 设置变形的中心点
11、backface-visibility 设置盒子背面是否可见
6.animation动画
1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线 linear(匀速)|ease(缓冲)|steps(步数)
5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n|infinite
7、animation-direction 动画结束后是否反向还原 normal|alternate
8、animation-play-state 动画状态 paused(停止)|running(运动)
9、animation-fill-mode 动画前后的状态 none(缺省)|forwards(结束时停留在最后一帧)|backwards(开始时停留在定义的开始帧)|both(前后都应用)
10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性
