线型渐变 （向下/向上/向左/向右/对角方向）

属性：background: linear-gradient(direction, color-stop1, color-stop2, …);

linear-gradient：定义线性渐变

direction:设置渐变的方向：向上，向下，向左，向右，对角
不设置方向的时候，默认为从上到下的渐变

如果只想使用一个方向值，则需要添加私有前缀,方向值代表从哪开始

要想添加方向在标准语法之下需要给方向添加一个to，代表去哪个方向
color：渐变的颜色，至少两个颜色 默认颜色是均等分布的

  1. 从上到下（默认情况下）
  2. .box {
  3.   background: -webkit-linear-gradient(red, blue);  /* Safari 5.1 - 6.0 */（苹果）
  4.   background: -o-linear-gradient(red, blue);   /* Opera 11.1 - 12.0 */(欧朋)
  5.   background: -moz-linear-gradient(red, blue);   /* Firefox 3.6 - 15 */（火狐）
  6.   background: linear-gradient(red, blue);  /* 标准的语法 */
  7. }
  1. 从左到右 （兼容其它浏览器省略）
  2. .box  {
  3.   background: -webkit-linear-gradient(left, red , blue);   /*从左*/  
  4.   background: linear-gradient(to right, red , blue);    
  5. }
  1. 从左上角开始（到右下角）的线性渐变
  2. .box {
  3.   background: -webkit-linear-gradient( left top, red , blue); 
  4.   background: linear-gradient(to bottom right, red , blue); 
  5. }

一个重复的线性渐变：

  1. .box  {
  2.     background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
  3.  }

径向渐变：（由它们的中心定义）

属性：radial-gradient(position,shape size,color1,color2…)

radial-gradient:定义径向渐变

渐变中心，渐变大小的设置
size 参数定义了渐变的大小。 它可以是以下四个值：
closest-side | farthest-side | closest-corner | farthest-corner

shape 参数定义了形状。它可以是值 circle (圆)或 ellipse（椭圆）。默认值是 ellipse。
（注意：宽高一样时，都表现为圆形渐变）

添加私有前缀的情况下可以使用shape at position(circle at top)

取值：关键字left top

top=center top=top center

right top

right=right center=center right

right bottom

bottom

left bottom

left

center默认
固定值：代表一个坐标使用px单位，要写两个值
百分比：两个值，代表的是占据宽高的百分比的一个位置

  1. .box  {
  2.   background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
  3.   background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
  4.   background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
  5.   background: radial-gradient(red, green, blue); /* 标准的语法 */
  6. }
  1. 形状为圆形的径向渐变：
  2. .box  {
  3.   background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
  4.  }

重复径向渐变

属性：repeating-radial-gradient() ：

  1. box  {
  2.    background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
  3.  }

盒子阴影

定义阴影：box-shadow

添加阴影相当于多了一个一模一样的黑色背景的盒子

  1. x水平偏移量 右是正方向

  2. y垂直偏移量 下是正方向

  3. 模糊半径

  4. 阴影扩展半径

  5. 阴影的颜色

  6. 投影方式 inset表示内投影

阴影
box-shadow: 5px 5px 5px 5px;

四周阴影
box-shadow: 0 0 5px 5px greenyellow;

内投影
box-shadow: 0 0 5px 5px greenyellow inset;

文字阴影

语法：
text-shadow: 水平偏移 垂直偏移 模糊程度 颜色;

  1. ext-shadow: 0 1px 1px #fff；  /* 一种阴影*/
  3. text-shadow:0px 0px 4px yellow,0px 0px 10px red;   /*两种阴影*/

滤镜 （filter 属性）

  1. 模糊
    .blur {-webkit-filter: blur(4px);filter: blur(4px);}

  2. 亮度
    .brightness {-webkit-filter: brightness(0.30);filter: brightness(0.30);}

  3. 对比度
    .contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}

  4. 灰色
    .grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}

  5. 色相旋转
    .huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}

  6. 反相
    .invert {-webkit-filter: invert(100%);filter: invert(100%);}

  7. 透明度
    .opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}

  8. 饱和度
    .saturate {-webkit-filter: saturate(7); filter: saturate(7);}

  9. 深褐色
    .sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}

  10. 阴影
    .shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}