一、css3背景切割
语法：background-clip:border-box|padding-box|content-box;
border-box 默认值，背景在border以及border以内的区域可见
padding-box 背景在padding区域和content区域可见
content-box 背景只在content区域可见
注：background-clip就是用来设置背景在哪个区域可见
二、背景原点
语法：background-origin:padding-box|border-box|content-box;
padding-box 默认值，背景原点从padding区域开始
border-box 背景原点从border区域开始
content-box 背景原点从content区域开始
注：background-origin主要用来设置背景图的定位区域
注：我们经常将背景切割和背景原点结合使用
eg: background-clip:content-box;
background-origin:content-box;
背景在content区域可见，背景原点从content区域开始
三、背景尺寸
语法：background-size:数值|百分比|cover|contain;
1.数值
以数值的方式来设置背景图的宽度和高度，第一个值代表宽度，第二个值代表高度，当省略第二个值时，默认为auto,等比例缩放
eg1: background-size:400px 150px; (有可能会发生变形,不会超出容器)
eg2: background-size:400px; (不会发生变形，有可能超出容器)
2.百分比
以容器宽高的百分比来设置背景图的大小
eg1: background-size:100% 100%; (背景图不会超出容器，但是有可能会发生变形)
eg2: background-size:100%; (背景图有可能超出容器，但是不会发生变形)
3.cover
将背景图扩展至足够大，以使背景图完全覆盖背景区域，背景图有可能超出容器，不会发生变形
4.contain
把图像扩展至最大尺寸，以使宽度和高度完全适应内容区域。背景图像始终被包含在容器内,不会发生变形
四、hsla模式
语法：background:hsla(h,s,l,a);
h 色调，取值范围0~360
s 饱和度，取值范围0%~100%
l 明度，取值范围0%~100%
a 透明度，取值范围0~1
五、多背景图
语法：background:url(1.jpg) no-repeat left top,
url(2.jpg) no-repeat right top,
url(3.jpg) no-repeat right bottom,
url(4.jpg) no-repeat left bottom,
url(5.jpg) repeat;
六、背景渐变
1.线性渐变
语法：background:linear-gradient(方向,颜色值 渐变位置,颜色值 渐变位置);
eg: background:linear-gradient(to right,red 0%,blue 20%,green 30%);
注：重复的线性渐变，写法如下：
background:repeating-linear-gradient(red 0%,blue 10%,green 20%);
注：设置重复的线性渐变时，一定要指定渐变位置
2.径向渐变
语法：background:-webkit-radial-gradient(中心点位置,形状 渐变半径长度,颜色值 渐变位置,颜色值 渐变位置);
eg: background:-webkit-radial-gradient(left top,circle closest-corner,red 0%,green 20%);
注：a) circle 默认渐变形状为椭圆，设置为circle时为圆形
b) closest-corner 渐变半径为圆心到离圆心最近的角
closest-side ----------------------------边
farthest-corner -------------------------远的角
farthest-side -------------------------远的边
注：重复的径向渐变，写法如下：
background:-webkit-repeating-radial-gradient(red 0%,green 10%,yellow 15%);
扩展一、蒙版
语法：-webkit-mask-image:url(图片路径)|使用渐变作为蒙版;
扩展二、背景在文本区域可见
语法：-webkit-background-clip:text;
注：设置为text时，字体颜色必须设置为透明
七、图像边框
1.图片边框路径
语法：border-image-source:url(图片路径);
2.图像边框裁剪位置
语法：border-image-slice:数值;
注：默认情况下，中间部分不显示，添加fill即可显示
eg: border-image-slice:27 fill; (设置数值专指像素)
3.图像边框平铺属性
语法：border-image-repeat:stretch|repeat|round;
stretch 默认值，拉伸
repeat 平铺，会出现不完整的图像
round 铺满，不会出现不完整的图像
eg: border-image-repeat:round stretch;
水平方向铺满，垂直方向拉伸