---恢复内容开始---
一、CSS3新增选择器
1、nth-chlid(n)用法
selector:nth-chlid(n)指找到第n个子元素并且该元素为selector标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
.box p,.main p{
background:red;
color:#fff;
margin-top:10px;
}
/*找到类为box下的第三个子元素并该元素为p标签的*/
.box p:nth-child(3){
background:gold;
}
.box p:nth-of-type(3){
background:gold;
}
/*找到类为main下的第三个子元素并该元素为div标签的*/
.main div:nth-child(3){
background: pink;
}
/*找到类为main下的第三个p标签*/
.main p:nth-of-type(3){
background:green;
}
</style>
</head>
<body>
<div class="box">
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
<p>段落6</p>
</div>
<div class="main">
<p>段落1</p>
<p>段落2</p>
<div>这是一个div</div>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
<p>段落6</p>
</div>
</body>
</html>
2、nth-last-chlid(n)用法
selector:nth-last-chlid(n)指找到倒数第n个子元素并且该元素为selector标签
3、selector：enabled可用的表单控件
4、selector:disabled不可用的表单控件
<style>
input:disabled{
background:red;
}
input:enabled{
background:gold;
}
/*选择复选框，紧邻文字变为空色*/
input:checked + label{
color:red;
}
</style>
<body>
<form>
<input type="text" placeholder="请输入用户名" disabled>
<input type="password" placeholder="请输入密码">
<input type="checkbox"><label>记住用户名</label>
</form>
</body>
5、E>F E元素下的第一层子集
6、E~F E元素后面的兄弟元素
7、E+F 紧挨着的兄弟元素
8、属性选择器 E[data-attr]含有data-attr属性的元素
a、E[data-attr='ok'] 含有data-attr属性的元素且它的值为"ok";
b、E[data-attr^='ok']含有data-attr属性的元素且它的值开头含有"ok";
c、E[data-attr$='ok']含有data-attr属性的元素且它的值结尾含有"ok";
d、E[data-attr*='ok']含有data-attr属性的元素且它的值中含有"ok";
eg div[data-attr = "ok"]{
color:red;
}
二、CSS3圆角
1、设置某一个角的圆角：border-radius:左上角 右上角 右下角 左下角;
比如设置左上角的圆角：border-top-left-radius:30px 60px;
2、同时设置四个角：border-radius:30px 20px 10px 50px;
3、设置四个角相同（常用）：border-radius:20%;border-radius:50%;(是正圆)
三、CSS3阴影
1、box-shadow:水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影
注：正值向右偏移，向下偏移，默认为外阴影
box-shadow:10px 5px 20px 2px pink;
如果做内阴影的话，可以把偏移量设为0
box-shadow:0 0 20px 2px red inset;
四、CSS3 透明度rgba（新的颜色值表示法）
1、盒子透明度表示法：opacity:0.1;filter:alpha(opacity=10)（兼容IE）
2、rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度
五、transition过渡动画 （需要触发）
transition:过渡属性 时间 运动方式 动画延迟
1、transition-property 设置过渡的属性，比如：width height background-color（是在宽度上做动画还是在高度上亦或是背景上）
2、transition-duration 设置过渡的时间，比如：1s 500ms
3、transition-time-function 设置过渡的运动方式
a、linear 匀速
b、ease 开始和结束慢速
c、ease-in 开始时慢速
d、ease-out 结束时慢速
e、ease-in-out 开始和结束时慢速
4、transition-delay 设置动画的延迟
制作图片文字遮罩
六、transform变换（一般配合transition使用，有个过渡效果不至于太突兀）
1、translate(x,y) 设置盒子位移 如:transform:translate(200px,300px);
2、scale(x,y) 设置盒子缩放 如：transform:scale(1.2,1);
3、rotate(deg) 设置盒子旋转 如：transform:rotate(360deg);
4、skew(x-angle,y-angle) 设置盒子倾斜 如:transform:skew(20deg,30deg);
5、perspective 设置透视距离（近大远小） 如:transform:perspective(800px) rotateX(30deg);
6、transform-style flat| preserve-3d 设置盒子是否按3d空间显示 如：transform-style:preserve-3d;
7、translateX、translateY、rotateZ 设置三维移动
8、rotateX、rotateY、rotateZ 设置三维旋转
9、scaleX、scaleY、scaleZ 设置三维缩放
10、transform-origin 设置变形的中心点 如：transform-origin:left top;transform-origin:20px 50px;
11、backface-visibility 设置盒子背面是否可见 如：backface-visibility:hidden;
例：翻面效果（正面是图片，鼠标点击图片之后，会翻转180度背面出现文字说明）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>翻面效果</title>
<style>
*{
margin:0;
padding:0;
}
.con{
width:200px;
height:144px;
border:1px solid #ccc;
margin:100px auto;
position: relative;
transform-style: preserve-3d;
transform:perspective(800px) rotateY(0deg);
}
.pic,.info{
width:200px;
height:144px;
position:absolute;
left:0;
top:0;
transform:perspective(800px) rotateY(0deg);
backface-visibility: hidden;
transition:all 500ms ease;
}
.info{
background:gold;
text-align: center;
line-height: 144px;
backface-visibility: hidden;
transform:translateZ(2px) rotateY(180deg);
}
.con:hover .pic{
transform:perspective(800px) rotateY(180deg);
}
.con:hover .info{
transform:perspective(800px) rotateY(0deg);
}
</style>
</head>
<body>
<div class="con">
<div class="pic">
<img src="../images/furit_01.jpg" alt="">
</div>
<p class="info">图片文字说明</p>
</div>
</body>
</html>
七、CSS3 animation动画（直接进行动画，不需要触发）
animation:动画名称 动画持续时间 动画运动方式 动画开始延迟时间 动画应用次数 动画结束后是否按原路返回 动画前后的状态;同时设置多个属性
如：animation:moving 1s ease 1s 6 alternate forwards;
1、@keyframes 定义关键帧动画
如：@keyframes 动画名{
from{属性：属性值}
to{属性：属性值}
}
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线
a、linear 匀速
b、ease 开始和结束慢速
c、ease-in 开始时慢速
d、ease-out 结束时慢速
e、ease-in-out 开始和结束时慢速
f、steps 动画步数
5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n|infinite
7、animation-direction:normal 默认动画结束不返回/alternate 动画结束后返回
8、animation-play-state 动画状态
a、paused 停止
b、running 运动
9、animation-fill-mode 动画前后的状态
a、none 不改变默认行为
b、forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
c、 backwards 在animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
例：loding动画，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Loading动画</title>
<style>
*{
margin:0;
padding:0;
}
.con{
width:300px;
height:100px;
margin:50px auto;
border:1px solid #ccc;
position: relative;
}
.con div{
width:30px;
height:50px;
background:gold;
margin:15px;
float:left;
border-radius: 10px;;
}
.con p{
position: absolute;
left:0;
bottom:0;
width:100%;
text-align: center;
}
.con div:nth-child(1){
background:red;
animation:loading 500ms ease 0s infinite alternate;
}
.con div:nth-child(2){
background:orangered;
animation:loading 500ms ease 100ms infinite alternate; }
.con div:nth-child(3){
background: blue;
animation:loading 500ms ease 200ms infinite alternate; }
.con div:nth-child(4){
background: green;
animation:loading 500ms ease 300ms infinite alternate; }
.con div:nth-child(5){
background: cyan;
animation:loading 500ms ease 400ms infinite alternate; }
@keyframes loading {
from{
transform:scale(1);
}
to{
transform: scale(0.5);
}
}
</style>
</head>
<body>
<div class="con">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p>Loading...</p>
</div>
</body>
</html>
八、CSS3浏览器样式前缀
1、为了让CSS3样式兼容，需要将某些样式加上浏览器前缀
a、-ms- 兼容IE浏览器
b、-moz- 兼容firefox
c、-o- 兼容opera
d、-webkit- 兼容chrome和safari
2、Sublime text编辑器自动添加浏览器前缀
目前，有些CSS3属性需要加前缀，有些不需要加，有些只需要加一部分，这些加前缀的工作可以交给插件来完成，比如安装autoprefixer
Sublime text中安装autoprefixer
a、在preferences/key Bindings-Users
设置快捷键{"key":["ctrl+alt+x"],"command":"autoprefixed"}通过此工具可以按照最新的前缀使用情况给样式自动加前缀
说明：last 7 versions：最新的浏览器的7个版本
cascade：缩进美化属性值
b、在preferences/package setting>autoprefixer>setting-user{
"browsers":["last 7 versions"],
"cascade":true,
"remove":true
}