1、线性渐变

语法：linear-gradient([point || angle ]? stop1,stop2,stop3.....)

设置线性渐变的方向

point:

  to left ：渐变从右到左，相当于270（.90）deg。

  to right：渐变从左到右，相当于：90deg。

  to top :渐变从下到上，相当于：0deg。

  to bottom：渐变从上到下，相当于180deg。（默认从上到下）

angle：

可以直接设置 deg度数，二者任选其一。

2、径向渐变

径向渐变由它的中心定义。

radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果。

语法：radial-gradient（[shape,size,position,stop1,stop2]）

shape:渐变的形状，ellipse表示椭圆,circle表示圆形.默认为ellipse,如果元素形状为正方形的元素，则ellipse和circle一样。

size：渐变的大小，closest-side：最近边；farthest-side：最远边；closest-corner：最近角；farthest-corner：最远角。默认是最远的角farthest-corner。

position：确定圆心的位置（参考元素左上角）如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二个值默认为50%，即center。

3、重复渐变

线性重复渐变

径向重复渐变

 

4、background背景设置

设置图片显示的位置：background-position: center ;

如果图片大于当前div容器，则显示不完全

如果图片小于当前div容器，那么图片默认平铺

设置平铺方式：

   no-repeat 不平铺

round 自动适应大小 平铺

space:图片不会缩放，只会在    图片之间产生相同的间距值

设置滚动容器的背景行为：

                   fixed:背景图片固定位置不变
                   scroll:当滚动容器的时候，背景图片也会滚动 
                   local:背景图片会跟随内容一起滚动
                   local与srcoll区别:
                   local:背景图片会跟随内容一起滚动
                   srcoll:背景图片不会跟随内容一起滚动

设置背景图片大小：

background-Origin

background-Origin属性指定了背景图像的位置区域。

content-box, padding-box,和 border-box区域内可以放置背景图像。

padding-box:效果（前提是加了padding属性）

content-box：效果

border-box

 

5、过渡