Gradients 渐变
在以前遇到渐变的背景，我们只能选择使用 图片 ，而现在通过 gradients 这个 属性 就可以实现颜色的渐变。它的实现是通过浏览器 生成 的，可以当成是矢量图形。学会它只需要几个字符就可以 生成 一个 很大的渐变图形。
不过值得注意的是虽然它是 一个 颜色，但是使用它之后就不能再使用背景 图片 了。
1. 官方定义
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间 显示 平稳的过渡。
以前，你必须使用图像来实现这些 效果 。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变 效果 的元素在放大时看起来 效果 更好，因为渐变（gradient）是由浏览器 生成 的。
CSS3 定义了两种类型的渐变（gradients）：
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义。
2. 解释
这个 属性 可以通过写一些参数来 生成 一个 渐变图形，例如从黄色渐渐的过度到红色，以前的实现方式这可以是 一个 径向渐变，也可以是 一个 线性渐变。 生成 的这个渐变图形在放大或缩小的时候都不会失真，因为它是由浏览器模拟 生成 的，就和我们使用矢量图是一样的 效果 。
线性渐变：顾名思义颜色的变化规律是沿着一条直线，它可以是各个方向上面的线。
3. 语法
3.1 线性渐变
.demo {
background : linear-gradient ( direction|angle, color-stop, color-stop, ) ;
}
属性 说明
值 描述 directio | angle 线性渐变的方向，例如： to right ， to left， to b ott om right，也可以是 一个 角度。 color-stop# 线性渐变的颜色，至少需要两个颜色。也就是说需要至少有 color-stop1, color-stop2。 @H_ 301 _102@
说明：创建 一个 线性渐变至少需要两个颜色，他们的 默 认方向是从上到下的。
使用角度可以创建更细腻的渐变。但要注意的是：这个角度值得是水平方向和渐变线之 间的 角度。0度从下到上 90度从左到右，这样 一个 顺时针的变化。
3.2 径向渐变
.demo {
background-image : radial-gradient ( shape size at position, start-color, , last-color ) ;
}
属性 说明
值 描述 shape 径向渐变颜色区域的形状 circle（圆形）或 ellipse（椭圆） size 参数定义了渐变的大小 closest-side farthest-side closest-corner farthest-corner at 固定搭配 shape size 来表示在 一个 位置 position position 径向渐变的起点位置 start-color 径向渐变的颜色至少需要两个颜色。 @H_ 301 _102@
说明： 径向渐变同样可以省略 shape size at position ，这样 默 认就是 一个 圆形的径向渐变，中心点在元素的中心点位置。 每个颜色后面可以跟 一个 表示长度的数值 % px rem 等，用来表示颜色的覆盖区域，大于这个数值则开始径向渐变。
4. 兼容性
IE Firefox Chrome Safari Opera ios android 9.0+ 4.0+ 4.0+ 3.0+ 10.5+ all all @H_ 301 _102@
5. 实例
5.1 线性渐变
< div class = " demo " > </ div >
创建 一个 从上到下颜色由红变绿的线性渐变。
.demo {
width : px ;
height : px ;
background : linear-gradient ( red,green ) ;
}
效果 图
创建 一个 从上到下颜色由红变绿的线性渐变 效果 图
如果渐变方向正好是上下方向，那么只要写两个颜色就好了。
接上面 一个 例子，让红色在元素 70%的位置之后在开始向绿色渐变。
.demo {
width : px ;
height : px ;
background : linear-gradient ( red ,green ) ;
}
效果 图
让红色在元素 70%的位置之后在开始向绿色渐变 效果 图
这个的实现只要在颜色后面加 一个 % 数就好，也可以是其他的计量单位例如 px 。
创建 一个 从左到右的渐变背景色。
.demo {
width : px ;
height : px ;
background : linear-gradient ( to right,red ,green ) ;
}
效果 图
创建 一个 从左到右的渐变背景色 效果 图
创建 一个 从左上到右下的渐变颜色。
.demo {
width : px ;
height : px ;
background : linear-gradient ( to right b ott om,red,green ) ;
}
效果 图
创建 一个 从左上到右下的渐变颜色 效果 图
这里的 to right b ott om 也可以写成 right b ott om 。
创建 一个 30 度角的线性渐变。
.demo {
width : px ;
height : px ;
background : linear-gradient ( deg,red,green ) ;
}
效果 图
创建 一个 30 度角的线性渐变 效果 图
创建 一个 0 度角的线性渐变。
.demo {
width : px ;
height : px ;
background : linear-gradient ( deg,red,green ) ;
}
效果 图
创建 一个 0 度角的线性渐变 效果 图
5.2 径向渐变
创建 一个 红色到绿色的径向渐变。
.demo {
width : px ;
height : px ;
background : radial-gradient ( red,green ) ;
}
效果 图
创建 一个 红色到绿色的径向渐变 效果 图
说明：渐变 默 认形状是椭圆形，但是如果在 一个 宽度和高度相等的元素内则会变成圆形，但是其实还是椭圆的，只是看到的像圆形，这是因为两个中心点重合了。
创建 一个 椭圆红色到绿色的假圆形径向渐变。
.demo {
width : px ;
height : px ;
background : radial-gradient ( red,green ) ;
}
创建 一个 椭圆红色到绿色的假圆形径向渐变 效果 图
说明：这不是真的圆形如果宽度和高度不相等则变成椭圆的。
创建 一个 真正的圆形渐变。
.demo {
width : px ;
height : px ;
background : radial-gradient ( circle,red,green ) ;
}
创建 一个 真正的圆形渐变 效果 图
创建 一个 重复的径向渐变。
.demo {
width : px ;
height : px ;
background : repeating-radial-gradient ( circle,red ,green ) ;
}
效果 图
创建 一个 重复的径向渐变 效果 图
设定渐变的不同size我们左下对比。
.demo {
width : px ;
height : px ;
float : left ;
margin-right : px ; ;
}
.demo0 {
background-image : radial-gradient ( red, green ) ;
}
.demo1 {
background-image : radial-gradient ( closest-side , red, green ) ;
}
.demo2 {
background-image : radial-gradient ( farthest-side , red, green ) ;
}
.demo3 {
background-image : radial-gradient ( closest-corner , red, green ) ;
}
.demo4 {
background-image : radial-gradient ( farthest-corner , red, green ) ;
}
效果 图
设定渐变的不同size我们左下对比 效果 图
说明：从左到右依次为： 默 认 closest-side farthest-side closest-corner farthest-corner ,可以清楚的观察到渐变的中心点都是元素的中心点，当时他们的过度点出现了明显的不同。
改变渐变的中心点。
.demo {
width : px ;
height : px ;
background-image : radial-gradient ( at top left,red, green ) ;
}
效果 图
改变渐变的中心点 效果 图
说明，也可以是 数量 单位例如
background-image : radial-gradient ( at ,red, green ) ;
我们可以把它理解为 一个 坐标。
6. 经验 分享
不要写成下面这样
(left,circle,red 10%,yellow 50%,green 50%)
left 前面一定要 加上 at 不然它的兼容性很不好。
使用渐变背景色可以是 background 也可以是 background-image 但不要写成 background-color 。
设置了渐变背景色就不能在用 一个 元素内在使用 图片 了如果想叠加 图片 可以像下面这样的结构：
< div class = " demo " >
< div class = " demo-img " > </ div >
</ div >
通过在内部新建 一个 标签 来引用你想插入的 图片 ，并通过定位来达到想要的 效果 。
尽量使用渐变而不是 图片 ，这样可以减少网络请求，也减少项目体积。
7. 小结
渐变 属性 因为不兼容 IE8 浏览器，所以在使用这个的时候 要做 好降级处理。例如可以在 IE8 使用纯色，或者通过 图片 代替，而非 IE8 在使用渐变，这也可以通过 JS 判断环境。
text-justify 对齐 ? ?box-sizing 盒类型