这是我参与8月更文挑战的第16天，活动详情查看：更文挑战
盒子阴影和文字阴影
参数用空格隔开
box-shadow: 右偏移量 下偏移量 模糊半径 延伸量(可以省略) 颜色;
举例：
box-shadow: 5px 5px 5px 5px rgba(0,0,0,.3);
一个元素可以设置多个阴影，用逗号隔开。 举例：
box-shadow: 0px 0px 5px red, 10px 10px 10px blue, 20px 20px 5px green;
内阴影：只需要增加一个关键字inset
文字阴影
text-shadow: 右偏移量 下偏移量 模糊半径 颜色；（和盒子阴影很相似没有内阴影和延伸量）
举例：
text-shadow: 3px 3px 8px rgba(255,0,0,.6);
背景
background-color: 背景色
background-image: 背景图
background-repeat: 背景图是否重复
background-position: 背景位置
background-attachment: 背景是否滚动
背景起源
background-origin: content-box;(内容盒)
不设置content-box背景图默认背景起源位置是border以内。
设置content-box背景图显示在内容盒以内.
background-origin: content-box;
background-position: 背景图相对于背景起源位置的偏移
background-position: 10px 50px;
背景裁切
background-clip: content-box;
表示将其他区域的背景裁切掉，只剩下内容盒的背景图。
等价写法：合并书写
background: url(images/baby.png) content-box;
背景尺寸
background-size: 背景图宽度 背景图高度;
- 像素表示法
background-size: 400px 500px;
- 百分数表示法
background-size: 背景图宽度相对于大背景宽度比值 背景图高度相对于大背景高度比值;
- 单词表示法
cover(覆盖，尽可能大)
背景图一定可以将大背景都覆盖住，并且背景图不会变形，背景图可能显示不完整。
background-size: cover;
contain(容纳，显示背景图全部)
背景图一定可以显示完整，并且背景图不会变形，大背景区域可能会留白。
background-size结合精灵图使用：
精灵缩小一半方法：
1 盒子宽高减半
2 背景图减半设置(background-size)
3 精灵图位置减半（background-position）
背景渐变
背景渐变使用的是background-image而不是background-color
css3新的属性或者属性值处于实验阶段会添加浏览器前缀。
chrome , safari -webkit-
firefox -moz-
IE -ms-
opera -o-
线性渐变：
linear线性
gradient渐变
第一个参数：渐变开始方向（只需要书写开始的方向不要书写结束方向）
background-image: -webkit-linear-gradient(top left,orange,pink);
第二个参数：渐变颜色，可以用逗号隔开书写多个颜色
background-image: -webkit-linear-gradient(right,orange,pink,red,blue);
颜色后面可以用空格隔开百分数，表示该颜色在整体渐变中出现的位置。
background-image: -webkit-linear-gradient(left,red 40%,green 80%,blue);
多背景
一个元素可以渲染多个背景，用逗号隔开，剩余部分给后面的背景图。
其他单一属性也可以使用逗号隔开，表示对应背景图设置
过渡
过渡的基本形式
元素 → 元素:hover
都是干嘣的效果，瞬间从开始完成到结束状态。
过渡效果：将开始状态到结束状态可以将中间过程也可以查看到。
第一个参数: 参与过渡的属性（一般我们习惯书写all，所有变化的属性都参与过渡）
第二个参数： 完成时间，单位s
第三个参数： 缓冲描述（linear匀速 ease变速 贝塞尔曲线）
第四个参数： 延迟时间，单位也是s,如果没有延迟0s。
transition: width 1s cubic-bezier(0.59, 0.41, 0.17, 1.21) 10s;
过渡参与的属性
数值型的属性可以参与过渡。比如width height font-size 等
可以参与过渡
变形
2D变形
transform: 变形
旋转：rotate()
单位是deg
正方向：顺时针
- 放缩 scale(数字)
没有单位
0-1表示缩小
1-无穷 表示放大
- skew(水平斜切，垂直斜切) 单位是deg
同一个元素可以有多个变形，用空格隔开。
元素没有变形none
2D空间移动
空间移动：translateX() 表示水平方向移动（表示相对于自身当前位置进行偏移）
translateY() 表示垂直方向移动，单位px
transform: translate(100px, 100px);
绝对定位元素的水平居中：
left: 50%;
mgl: -自身宽度/2;(可以替换成空间移动)
举例：
left: 50%;
transform: translateX(-50%);
动画
定义动画
定义动画：
需要添加前缀
@-浏览器前缀-keyframes 动画名称 {
from {} 开始帧
to {} 结束帧
}
key: 关键
frame帧
每一帧书写的属性必须一一对应
@-webkit-keyframes donghua {
from {
width: 200px;
}
to {
width: 600px;
}
}
调用动画
第一个参数：动画名称
第二个参数：动画完成时间，单位是s(表示从动画开始到结束一次动画完成时间)
第三个参数： 缓冲描述 linear ease
第四个参数： 动画延迟时间，单位s，延时时间体现在第一次动画开始。
第五个参数： 动画次数（infinite无限）
第六个参数：自动补全反方向动画（alternate）反方向也算动画次数
最后一个参数：保持最后一帧的状态（forwards）
百分数定义动画
表示在整个动画中该时间动画完成的状态
0% {
width: 200px;
}
100% {
width: 400px;
}
动画属性
animation-play-state: paused
play: 播放
state: 状态
paused: 暂停
举例：
.box:hover img {
-webkit-animation-play-state: paused;
}
