一、浏览器内核
二、厂商前缀
三、背景渐变
CSS3渐变(gradients) 可以让你在两个或多个指定的颜色之间显示平稳的过渡。
以前，你必须使用图像来实现这些效果。但是，通过使用CSS3渐变(gradients) ,你可以减少下载的时间和宽带的使用。
此外,渐变效果的元素在放大时看起来效果更好,因
为渐变(gradient) 是由浏览器生成的。
CSS3定义了两种类型的渐变
（一）线性渐变
定义：为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色，同时，你也可以设置一个起点和一个方向（或一个角度）。
线性渐变：从上到下（默认情况下）
实例：
#grad { width: 300px; height: 300px; background: linear-gradient(red, blue); margin: 40px; }
线性渐变—从左到右
下面的实例演示了从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色
使用角度
定义：如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right）等等。
（二）径向渐变
四、转换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 200px; height: 200px; background-color: red; margin: 50px; } .box:hover { /* transform: translate(0, 20px); */ /* transform: translateX(20px); */ /* transform: translateY(20px); */ /* 当只取一个值的时候表示水平方向移动的距离 */ transform: translate(20px); } </style> </head> <body> <div class="box"> </div> </body> </html>
