知识点一：渐变
1、线性渐变
(1)、从上到下(默认情况下)
background: linear-gradient(red,green);
百分比：从0-10%填充红色，50%-100%填充绿色
background: linear-gradient(red 10%,green 50%);
(2)、从左到右
background: linear-gradient(to right(red,green));
(3)、对角
background: linear-gradient(to bottom right(red,green));
background: linear-gradient(to top left(red,green));
(4)、对角使用多个颜色结点
background: linear-gradient(red,green, yellow);
2、径向渐变
(1)、颜色结点均匀分布（默认情况下）
background: radial-gradient(red,green,yellow);
(2)、颜色结点不均匀分布
background: radial-gradient(red 10%,green 30%,yellow 50%);
(3)、设置形状（主要取决于宽高）
background: radial-gradient(circle(ellipsis:椭圆(默认情况下)),red,green,yellow);
知识点二：背景
1、background-image属性
通过background-image属性添加背景图片
background:url(),url() top right(top、right控制第二张图片的位置);
2、background-size属性
background-size指定背景图像的大小
3、background-origin属性
background-Origin属性指定了背景图像的位置区域
content-box,padding-box,和border-box区域内可以放置背景图像。
4、background-clip属性
background-clip背景剪裁属性是从指定位置开始绘制
知识点三：过渡
1、过渡的工作方式
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：
(1)、指定要添加效果的CSS属性
(2)、指定效果的持续时间。
2、过渡属性
|
属性 |
描述 |
CSS |
|
简写属性，用于在一个属性中设置四个过渡属性。 |
3 |
|
|
规定应用过渡的 CSS 属性的名称。 |
3 |
|
|
定义过渡效果花费的时间。默认是 0。 |
3 |
|
|
规定过渡效果的时间曲线。默认是 "ease"。 |
3 |
|
|
规定过渡效果何时开始。默认是 0。 |
3 |
知识点四：分页
1、分页的工作方式
网站有很多个页面，就需要使用分页来为每个页面做导航。
2、点击鼠标悬停分页
如果点击当前页，可以使用 .active 来设置当前页样式，鼠标悬停可以使用 :hover 选择器来修改样式。
3、圆角样式
可以使用 border-radius 属性为选中的页码来添加圆角样式。
4、鼠标悬停过渡效果
我们可以通过添加 transition 属性来为鼠标移动到页码上时添加过渡效果。
5、带边框分页
我们可以使用 border 属性来添加带边框分页。
6、分页间隔
使用 margin 属性来为每个页码直接添加空格。
7、分页字体大小
使用 font-size 属性来设置分页的字体大小。
8、居中分页
让分页居中，可以在容器元素上 (如 <div>) 添加 text-align:center 样式。