16-CSS3渐变属性

CSS3渐变可以让你在两个或多个指定的颜色之间显示平稳的过渡。之前你必须使用图像来实现这些效果，但是通过CSS3渐变，可以减少下载事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变是由浏览器生成的。

一、线性渐变

指定水平和垂直的启示位置类制作一个对角渐变

1. 属性：background/bacjkground-images
2. 属性值：linear-gradient(参数)
3. 关于参数的使用方法：参数有很多个
   1. 表示参数值，控制渐变是从哪个方向开始变化的
   2. 表示颜色
   3. 表示颜色
   4. ……
4. 注意点
   • 线性渐变第一个方向参数是可以省略的，默认的方向是从上到下的
   • 多个参数之间需要使用逗号隔开

二、径向渐变

带有指定的角度的线性渐变

1. 属性：background

2. 属性值：radial-gradient

   （起点位置，渐变的形状，渐变的大小，颜色，颜色，……）

3. 注意点：

   • 径向渐变只有一种兼容写法

   • 多个参数用逗号隔开

     渐变的形状和大小同时存在的时候，不能用逗号，要用空格

三、重复渐变

重复线性渐变和重复径向渐变