渐变/阴影/镜像倒影/滤镜

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

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

• linear-gradient：定义线性渐变
• direction:设置渐变的方向：向上，向下，向左，向右，对角
  • 不设置方向的时候，默认为从上到下的渐变
  • 如果只想使用一个方向值，则需要添加私有前缀,方向值代表从哪开始
  • 要想添加方向在标准语法之下需要给方向添加一个to，代表去哪个方向

• color：渐变的颜色，至少两个颜色 默认颜色是均等分布的

  从上到下（默认情况下） 
  .box {   
    background: -webkit-linear-gradient(red, blue);  /* Safari 5.1 - 6.0 */（苹果）                background: -o-linear-gradient(red, blue);   /* Opera 11.1 - 12.0 */(欧朋)   
    background: -moz-linear-gradient(red, blue);   /* Firefox 3.6 - 15 */（火狐）                 background: linear-gradient(red, blue);  /* 标准的语法 */ 
  }

  从左到右 （兼容其它浏览器省略） 
  .box  {   
  background: -webkit-linear-gradient(left, red , blue);   /*从左*/     
  background: linear-gradient(to right, red , blue);     
  }

  从左上角开始（到右下角）的线性渐变 
  .box {   
  background: -webkit-linear-gradient( left top, red , blue);    
  background: linear-gradient(to bottom right, red , blue);  
  }

  一个重复的线性渐变：

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

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

  属性：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单位，要写两个值

• 百分比：两个值，代表的是占据宽高的百分比的一个位置

  .box  {   
  background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
  background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
  background: radial-gradient(red, green, blue); /* 标准的语法 */ 
  }

  形状为圆形的径向渐变： 
  .box  {   
  background: -webkit-radial-gradient(circle, red, yellow, green); 
  /* Safari 5.1 - 6.0 */
  }

  重复径向渐变

  属性：repeating-radial-gradient() ：

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

  文字渐变

• 概念：

• 语法

  选择器{
  -webkit-background-clip:text;
  }

• 流程：

  • 先给标签设置背景渐变
  • 再设置文字渐变：-webkit-background-clip:text;
  • 设置文字为透明色

    盒子阴影

    定义阴影：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;

镜像倒影

• 概念：实现盒子或元素的镜像效果

• 语法：

  选择器{
  -webkit-box-reflect:镜像的方向 镜像与本体的距离 遮幕;
  }

  • 镜像的方向
    • above：在本体的上方
    • below：在本体的下方
    • left：在左边
    • right：在右边
  • 镜像与本体之间的距离。以px为单位
  • 遮幕：一般可以借助线性渐变实现水面效果

• 例子

  选择器{    
  -webkit-box-reflect:below 0px linear-gradient(transparent 70%,white);
  }

  文字阴影

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

  text-shadow: 0 1px 1px #fff；  
  /* 一种阴影*/ 
  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);}