CSS3【控制样式，网页布局】
——CSS3中新特性样式篇
### 背景
background-origin： 规定背景图片的定位区域。
padding-box 背景图像相对内边距定位【默认值】
border-box 背景图像相对边框定位【以边框左上角为参照进行位置设置】
content-box 背景图像相对内容区域定位【以内容区域左上角为参照进行位置设置】
备注：1. 默认盒子的背景图片是在盒子的“内边距”左上角对齐设置。
background-clip： 规定背景的绘制区域。
border-box 背景被裁切到边框盒子位置 【默认值：将背景图片在整个容器中显示】
padding-box 背景被裁切到内边距区域【将背景图片在内边距区域（包含内容区域）显示】
content-box 背景被裁切到内容区域【将背景图片在内容区域显示】
background-size： 规定背景图片的尺寸。
cover 将背景图片按照原来的缩放比，将整个容器铺满；
contain 将背景图片按照原来的缩放比，完整的显示在容器中。
（不确定会将整个容器铺满……）
### 边框
box-shadow： 盒子阴影
例子：box-shadow:0px 0px 10px red;
第一个参数：代表阴影在水平方向的偏移量（正数向右，负数向左）；
第二个参数：代表阴影在垂直方向的偏移量（正数向下，负数向上）；
第三个参数：代表阴影的模糊度（不能设置负数）；
第四个参数：阴影颜色。
（设置多个阴影，使用逗号隔开）
border-radius： 边框圆角
border-image: 边框图片
设置边框图片
border-image-source: url("2.png");
边框图片裁切（不需要带单位）
border-image-slice: 20;
设置边框图片的平铺方式
border-image-repeat: stretch;
border-image-repeat: round;（更推荐）
border-image-repeat: repeat;
设置边框图片的宽度
border-image- 20px;
### 文本
text-shadow： 设置文本阴影
## CSS3新特性之选择器篇
属性选择器：
[属性名=值] {}
[属性名] {} 匹配对应的属性即可
[属性名^=值] {} 以值开头
[属性名*=值] {} 包含
[属性名$=值] {} 以值结束
结构伪类选择器：
:first-child {} 选中父元素中第一个子元素
:last-child {} 选中父元素中最后一个子元素
:nth-child(n) {} 选中父元素中正数第n个子元素
:nth-last-child(n) {} 选中父元素中倒数第n个子元素
备注；
n 的取值大于等于0
n 可以设置预定义的值
odd （选中奇数位置的元素）
even（选中偶数位置的元素）
n 可以是一个表达式：
an+b的格式
其他选择器：
:target 被锚链接指向的时候会触发该选择器
::selection 当被鼠标选中的时候的样式
::first-line 选中第一行
::first-letter 选中第一个字符
## CSS3新特性之颜色渐变
线性渐变三要素：
1. 开始颜色和结束颜色
2. 渐变的方向
3. 渐变的范围
background-image: linear-gradient(
to right,
red,
blue
);
备注：
表示方向：
1. to + right|top|bottom|left
2. 也通过角度表示一个方向：
0deg （从下向上渐变）
90deg （从左向右）
135deg（对角线）
径向渐变：
/* 径向渐变 */
background-image: radial-gradient(
100px at center,
red,
blue
);
## 2D转换
位移 : transform: translate(100px,100px);
备注：位移是相对元素自身的位置发生位置改变
旋转 : transform: rotate(60deg);
备注：取值为角度
缩放 ：transform: scale(0.5,1);
备注：取值为倍数关系，缩小大于0小于1，放大设置大于1
倾斜 ：transform: skew(30deg,30deg);
备注：第一个值代表沿着x轴方向倾斜
第二个值代表沿着y轴方向倾斜
## 3D转换
位移：transform: translateX() translateY() translateZ()
旋转：transform: rotateX(60deg) rotateY(60deg) rotateZ(60deg);
缩放：ransform: scaleX(0.5) scaleY(1) scaleZ(1);
倾斜：transform: skewX(30deg) skewY();
透视：perspective: 1000px;
（在网页中实现近大远小的效果。给父元素添加）
transform-style: preserve-3d;
（将平面图形转换为立体图形）
## CSS3新特性之动画篇
### 过渡（也称 补间动画）
文档：https://www.cnblogs.com/afighter/p/5731293.html
设置哪些属性要参与到过渡动画效果中： all
transition-property: all;
设置过渡执行时间
transition-duration: 1s;
设置过渡延时执行时间
transition-delay: 1s;
设置过渡的速度类型
transition-timing-function: linear;
简写：
transition: all 1s linear 1s;
### 动画
1、定义动画集
@keyframes rotate {
/* 定义开始状态 0%*/
from {
transform: rotateZ(0deg);
}
/* 结束状态 100%*/
to {
transform: rotateZ(360deg);
}
}
2、在样式中调用
/* 动画名称 */
animation-name: rotate;
/* 设置动画时间 */
animation-duration: 2s;
/* 设置动画执行的次数: infinite 无限执行; */
animation-iteration-count: infinite;
/* 动画执行的速度类型 */
animation-timing-function: linear;
/* 设置动画逆波（滚过来滚过去） */
animation-direction: alternate;
/* 设置动画延时 */
animation-delay: 1s;
/* 设置动画结束时候的状态 */
animation-fill-mode: forwards;
.box:hover {
/* 动画暂停 */
animation-play-state: paused;
}
注意：
1. 如果设置动画集使用的是百分比，那么记住百分比是相对整个动画执行时间的。
## CSS3新特性之网页布局篇
### 伸缩布局/弹性布局【响应式布局】
设置 父元素 为伸缩盒子【父元素必须为直接父元素】
display： flex
为什么在伸缩盒子中，子元素会在一行上显示？
1. 子元素是按照伸缩盒子中主轴方向显示
2. 只有伸缩盒子才有主轴和侧轴
3. 主轴： 默认水平从左向右显示
4. 侧轴： 始终要垂直于主轴
设置伸缩盒子主轴方向（flex-direction）
flex-direction: row; 【默认值】
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
设置元素在主轴的对齐方式( justify-content)
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
设置元素在侧轴的对齐方式 （align-items）
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: stretch; 【默认值】
设置元素是否换行显示（flex-wrap）
1. 在伸缩盒子中所有的元素，默认都会在一行上显示。
2. 如果希望换行：
flex-wrap: wrap | nowrap;
设置元素换行后的对齐方式（ align-content）
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-around;
align-content: space-between;
align-content: stretch; 【默认值】
PS：设置缩放比：
父元素 display: flex;
子元素 flex: n;