background背景图填充/裁切/css渐变

1. background-origin : 背景图的填充位置

 默认情况下，如果xy都平铺的话，border padding content 区域都有背景图。

 padding-box (默认) : 在padding区域开始填充背景图
 border-box : 在border区域开始填充背景图
 content-box  : 在content区域开始填充背景图

2. background-clip : 背景图的裁切方式

 padding-box 
 border-box (默认) 
 content-box 	

 注：当位置与裁切写入复合样式中，那么第一个值表示位置，第二个值表示裁切。

3. CSS3渐变

线性渐变：
    background-image:linear-gradient( 20deg , red , blue);
    注：角度是0deg在容器的最下面bottom位置。正数就是顺时针旋转。

径向渐变：
    radial-gradient : 径向渐变