1. 过渡动画:是从一个状态渐渐过渡到另一个状态 可以使我们的页面边得更加的好看,动感十足,低版本浏览器不支持这个属性 不影响页面布局
经常和hover 一起搭配使用
/* 如果需要多个属性利用逗号隔开 */
/* 过度属性 花费的时间 何时开始 */
/* transition: width 1s 1s,height 1s 1s; */
总写法: transition:all 1s;
2.css3渐变
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 (linear-gradient 线性渐变)
径向渐变（Radial Gradients）- 由它们的中心定义
url('URL') 图像的URL
none 无图像背景会显示。这是默认
linear-gradient() 创建一个线0性渐变的 "图像"(从上到下)
radial-gradient() 用径向渐变创建 "图像"。 (center to edges)
repeating-linear-gradient() 创建重复的线性渐变 "图像"。
repeating-radial-gradient() 创建重复的径向渐变 "图像"
inherit 指定背景图像应该从父元素继承
语法:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
背景图像:线性渐变(方向，颜色停止1，颜色停止2，...);
案例:
线性渐变 - 从上到下
顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色： up 向上 downwards 向下
background-image: linear-gradient(#e66465, #9198e5);
线性渐变 - 从左到右
从左边开始的线性渐变。起点是红色，慢慢过渡到黄色 (to right 向右 to left 向左)
background-image: linear-gradient(to right, red , yellow);
线性渐变 - 对角
从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到黄色
background-image: linear-gradient(to bottom right, red, yellow);
使用角度:如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向
（to bottom、to top、to right、to left、to bottom right，等等）。
background-image: linear-gradient(angle, color-stop1, color-stop2);
带有指定的角度的线性渐变： background-image: linear-gradient(-90deg, red, yellow);
带有多个颜色节点的从上到下的线性渐变： background-image: linear-gradient(red, yellow, green);
创建一个带有彩虹颜色和文本的线性渐变： 标准的语法
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
3. 使用透明度（transparent） 从左到右的线性渐变，带有透明度：
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
重复的线性渐变 repeating 重复出现
repeating-linear-gradient() 函数用于重复线性渐变：
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
CSS3 径向渐变
径向渐变由它的中心定义。
为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。
默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
语法:background-image: radial-gradient(shape size at position, start-color, ..., last-color);
1.径向渐变 - 颜色节点均匀分布（默认情况下）
background-image: radial-gradient(red, yellow, green);
2.径向渐变 - 颜色节点不均匀分布
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
3.设置形状
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
background-image: radial-gradient(circle, red, yellow, green); 圆形渐变
4. 不同尺寸大小关键字的使用
size 参数定义了渐变的大小。它可以是以下四个值：
closest-side 最近侧 最近端
farthest-side 最远端
closest-corner 最近角
farthest-corner 最远角
带有不同尺寸大小关键字的径向渐变：
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
重复的径向渐变
repeating-radial-gradient() 函数用于重复径向渐变：
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
举例说明:
background: linear-gradient(red 10%, green 85%, blue 90%)
其中：
10% 表示 red 的颜色中心线在线性渐变方向的 10% 的位置。
85% 表示 green 的颜色中心线在线性渐变方向的 85% 的位置。
90% 表示 blue 的颜色中心线在线性渐变方向的 90% 的位置。
10% 到 85% 是 red-green 的过渡色，85%-90% 是 green-blue 的过渡色。
比如这句：
background: linear-gradient(red 0%, green 50%, blue 50%) 和 background: linear-gradient(red 0%, green 50%, blue 10%)
