css3渐变、背景、过渡、分页

知识点一：渐变

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
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

知识点四：分页

1、分页的工作方式

网站有很多个页面，就需要使用分页来为每个页面做导航。

2、点击鼠标悬停分页

如果点击当前页，可以使用 .active 来设置当前页样式，鼠标悬停可以使用 :hover 选择器来修改样式。

3、圆角样式

可以使用 border-radius 属性为选中的页码来添加圆角样式。

4、鼠标悬停过渡效果

我们可以通过添加 transition 属性来为鼠标移动到页码上时添加过渡效果。

5、带边框分页

我们可以使用 border 属性来添加带边框分页。

6、分页间隔

使用 margin 属性来为每个页码直接添加空格。

7、分页字体大小

使用 font-size 属性来设置分页的字体大小。

8、居中分页

让分页居中，可以在容器元素上 (如 <div>) 添加 text-align:center 样式。