CSS权威指南阅读笔记第九章02

渐变

渐变是指从一个颜色到另一个颜色的平滑过渡；
渐变是图像，尽管渐变是通过CSS实现的，但是每一点都有svg,png,gif等图片一样；
有两种渐变类型：线性渐变和径向渐变；这两种渐变又各分为二：循环渐变和不循环渐变。
渐变可以用在任何可以使用图像的地方；
默认情况下，渐变背景将填满整个背景定位区域；

• 线性渐变：
  线性渐变值沿线性向量填充得到的渐变。整个向量称为梯度线；
  基本语法：

  linear-gradient([[angle | to side-or-quadrant]]? color-stop [,color-hint]? color-stop)
  

  开头是一个可选的方向，然后是一系列色标和中色点，结尾又是一个色标；

  渐变的默认方向是从上到下（to bottom）;
  渐变的颜色不限于两个；多少个都可以；色标之间不同的颜色尽量平滑混合；各颜色均匀分布在梯度线上；

• 径向渐变
  径向渐变也叫做圆形渐变；
  基本语法

  radial-gradient([[shape|size] [at position]] color-stop coloe-hint color-stop)
  

  可以声明形状和尺寸，可以声明渐变的中心点，然后声明两个或多个色标，色标之间可以指定中色点；

位置不声明，则默认是center，
形状除了方形元素外都是椭圆形，方形元素为圆形；只有两个值；

盒子投影box-shadow

box-shadow取值有：

none| [inset? && lenght{
   2,4} && color?]#

默认值是none，即不显示；

长度值最多可以有四个；第一个定义横向偏移，第二个定义纵向偏移；正数把投影向下和向右移动，负数把投影向上或向左移动；
如果提供第三个值，定义的是模糊距离，即指定给模糊留出多少空间；第四个值定义展开距离，改变投影的尺寸；

如果在box-shadow属性的值中加上inset,投影在框体内部渲染，不在浮动在画布之上，而像是向内凹陷；inset关键字可以在其他值前面，也可以在后面，唯独不可以在长度和颜色直接。

一个元素可以应用任意多个盒子投影，各投影之间以逗号分隔；