css各类设置

text-shadow

  该属性的作用为为页面中的文本添加阴影效果；通过设置它可以让网页中的文本有外发光，辉光，投影，浮雕，模糊，影子，描边，3D等效果。
写法通常如下
  text-shadow:2px 2px 2px #fff；这四个值分别代表
  X轴，Y轴，模糊程度(不可是负值)，阴影颜色

font-awesome

  是一个图标字体库，它提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果；它不需要引入一些繁琐的文件 只需要几个命令就可以直接使用icon图标。
方法有:
  直接导入
  <link rel=“stylesheet” href=“path/to/font-awesome/css/font-awesome.min.css”>
  定义安装
  npm install font-awesome-sass
  使用方法即是 <i class="-引用的图标">

background属性

属性
background-color	规定要使用的背景颜色。
background-position	规定背景图像的位置。
background-size	规定背景图片的尺寸。
background-origin	规定背景图片的定位区域。
background-clip	规定背景的绘制区域。
background-attachment	规定背景图像是否固定或者随着页面的其余部分滚动。
background-image	规定要使用的背景图像。
background-repeat	规定如何重复背景图像。

复合 使用方法例如:

 h1
  { 
  background: #000000 url(图片地址) no-repeat  fixed top;
  }  

box-shadow盒阴影

  它允许我们在几乎任何元素上来创建阴影效果可以让原本平面的、二维的页面上面创建出深度（第三维）的错觉。
box的常用格式为:
box-shadow: offset-x offset-y blur spread color position;

• 第一个长度值指定了阴影的水平偏移量。即在x轴上阴影的位置。正值在右边，而负值在元素的左边。
• 第二个长度值指定了阴影的垂直偏移量。即在y轴上阴影的位置。正值在元素的上边，而负值在下边.
• 第三个长度值代表阴影的模糊半径。负值是不被允许的，并会被处理成0。
• 第四个代表着阴影的尺寸。这个值可以被想象成从元素到阴影的距离。正值会在元素的各个方向按指定的数值延伸阴影。负值会使阴影收缩得比元素本身尺寸还小。默认值0会让阴影伸展得和元素的大小一样。
• 第五个，设置颜色颜色值

渐变

1. 线性渐变

   linear-gradient 线性渐变，指沿着某条直线朝一个方向产生渐变效果。
   语法格式为 ：linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>*])
   第一个参数表示线性渐变的方向(to left;to right;to top;to buttom)， 第二个参数是起点颜色；第三个参数是重点颜色可以添加多种颜色；表示多种颜色的渐变
   例如:

background: linear-gradient(to right, blue 0%, red 50%, ,black 25%,blue 25%, blue 100%);

1. 径向渐变

   radial-gradient: 径向渐变 指从一个中心店开始沿着四周产生渐变效果。
   语法格式:<radial-gradient> = radial-gradient([<shape>||<size>][at <position>]?,|[at<position>]?<color-stop>[,<color-stop>]+);
   position确定圆心的位置
   shape：渐变的形状（默认椭圆）
   size：渐变的大小
   color指定颜色
   例如

				radial-gradient(circle closest-side at center center,
					blue 0%, red10%,
					yellow 10%,black 20%);

3. 重复渐变

   即让渐变重复执行;
   语法为:
   repeating-radial-gradient
   repeating-linear-gradient

background: 
repeating-background: linear-gradient(to right, blue 0%, red 50%, ,black 25%,blue 25%, blue 100%);
background: repeating-radial-gradient(circle closest-side at center center,
					blue 0%, red10%,
					yellow 10%,black 20%);