回顾：
css3
border-radius：
border-top-left-radius：
-------------------------------------
动画：
1.transition：时间 改变样式 运动形式
2.跳变试的动画
定义动画
@-webkit-keyframes 动画名{
0%{}
30%{}
100%{}
}
------------------------------------------
背景透明：
background：rgba（0,0,0,0.6）
盒子阴影：
box-shadow:x轴偏移 y轴偏移量 模糊度 大小 颜色
inset
文字阴影
text-shadow：x轴偏移 y轴偏移量 模糊度 颜色
--------------------------------------------------
背景色渐变：
background：-webkit-linear-gradient（方向，颜色 10%，颜色）
background：-webkit-radial-gradient（方向，形状，颜色 10%，颜色）
-------------------------------------------
蒙版：
和图片用法是一某一样！
css3新
transform ：变形的样式
rotate（45deg）：旋转（默认中心来旋转，顺时针）
translate(200px,100px)：平移
x轴平移（正数往右） y轴平移（正数往下）
scale(1,2)：缩放
x轴 y轴
（给div加了这个样式，它里面的所有子级也会随着缩放，如果里面是负值，就会倒过来）
注意：
行内元素不支持次样式！
可以简写，写在一起：
transform:translate(100px,100px) scale(2) rotate(45deg);
原来选择器：
#div{}
.class{}
div{}
div,p,li{}
a:hover{}
css3选择器：
属性选择器：
input[type=text]{ background:red;}
input[value=bbb]{ background:red;}
*[type]{ background:blue;}
*[title]{ background:blue;}
div[title~=apple]{ background:red;}
1. E[name=value]
2. E[name]
3. E[name~=value] 只要包含value的元素就选中
4. E[name*=value] 只要包含a字母就可以
5. E[name^=value] 只要value第一个class的首字母是a就可以
6. E[name$=value] 只要value最后一个class的尾字母是a就可以
7. E[name|=value] 只要一value为首（value-abc）
8. E[name][name2] 俩个都得满足
结构性伪类选择器:
li:nth-child(1){ css里面从1开始
background:red;
}
li:nth-child(n){ 全选中
background:red;
}
li:nth-child(2n){ 偶数
background:red;
}
li:nth-child(2n-1){ 奇数
background:red;
}
li:nth-last-child(1){---倒数第一个
background:red;
}
其他的伪类选择器：
li:empty{-----选择空元素的
background:red;
}
#box>p{ border:2px solid red;}---选中的是离#box最近的p标签
#box~p{ border:2px solid red;}--选中的是离#box下面的兄弟元素
h1:not(.blue){ background:red;}---除了blue以外，其他的都选中！
文本伪类选择器：
js新的选择器：
document.querySelector('#box');获取一组
document.querySelectorAll('#box li');获取一组
