一、背景切割和背景原点
- 背景切割
语法：background-clip: bordekbox/padding-box/content-box;
border-box 默认值，背景在border及border以内的区域可见；
padding-box 背景在padding及padding以内的区域可见；
content-box 背景只在content区域可见；
2.background-origin padding-box/border-box/content-box
padding-box 默认值，背景原点从padding区域开始；
border-box 背景原点从borde区域开始；
content-box 背景原点从content区域开始；
扩展: 设置背景在文字区域可见
-webkit-background-clip:text;
注：设置该属性前，必须设置color:transparent;
二、背景尺寸
语法： background-size: 数值+单位/百分比/cover/contain
1.数值
eg: background-size:200px 100px;第一个值代表背景图宽度，第二个值代表背景图高度；
2.百分比
eg:background-size:100% 100%;不会超出容器，有可能发生形变；
background-size:100%;不会发生变形，有可能超出容器
3.cover
将背景图扩展至足够大，以使背景图能够完全覆盖背景区域，背景图不会发生变形，会超出容器；
4.contain
把图像扩展最大尺寸，以使宽度和高度，完全适应内容区域，背景图像始终被包含在容器内，并且不会发生变形；
三、rgba模式
语法：background:rgba(r,g,b,a) a代表透明度取值范围0~1;
eg: background:rgba(0,0,0,0.5);
rgab 和opactity设置透明度的区别
rgba只是给背景设置一定透明度，容器内的内容不受影响；
opacity是给整个容器设置一定的透明度，容器内的文本和图片都会跟随透明；
四、背景渐变
1.线性渐变
语法： background:-webkit-linear-gradient(渐变方向，颜色值， 渐变位置，颜色值，渐变位置)；
eg: background:linear-gradient(toright,red 0%,yellow 20%, green 60%)
兼容 background:-webkit-linear-gradient(left,red 0%,yellow 20%, green 60%);
注： 重复的线性渐变；
eg:background:-webkit-repeating-linear-gradient(red 0%,yellow 10%,green 20%);
- 径向渐变
语法：background-webkit-radial-gradient(渐变中心，渐变形状 渐变半径长度，颜色值，渐变位置，颜色值，渐变位置)
eg:background:-webkit-radial-gradient(left top cirde closest-side red 0%,yellow 20% green 30%);
注：渐变半径长度参数如下：
- closest-corner 渐变半径长度为圆心到离圆心最近的角。
- closest-side 渐变半径长度为圆心到离圆心最近的边。
- farthest-corner 渐变半径长度为圆心到离圆心最远的角。
- farthnest-side渐变半径长度为圆心到离圆心最远的边。
注：重复的径向渐变
语法：background:-webkit-repeating-radial-gradient(red 0%,yellow 10%,green 20%)
注：重复的渐变必须指定渐变位置；
五、文本阴影和盒模型
1.文本阴影
语法：text-shadow：水平偏移量 垂直偏移量 模糊度 颜色值；
eg: text-shadow:3px 3px 5px gray, 5px 5px 7px vlack;
注：
- 水平偏移量：向右为正，向左为负；
- 垂直偏移量：向下为正，向上为负；
- 模糊度：默认值为 0，值越大模糊度越大，不允许设置负值
扩展：文字描边
-webkit-text-stroke:3px yellow;
2.盒模型
语法： box-shaow:水平偏移量 垂直偏移量 模糊度 扩展半径 颜色值；
eg: box-shadow :3px 3px 5px gray,
注： 默认阴影为外阴影，如需呈现内阴影需添加inset；
注： 扩展半径；允许设置负值，值越大，扩展半径越大；
六、标准盒模型和怪异盒模型
标准盒模型中，我们设置的padding和border不包含在我们设置的width和height里面，怪异盒模型中，设置的padding和border会包含我们设置的width和height里面；
注：当没有添加文档声明时，就会触发某些浏览器(例如IE6)的怪异模式；
七、盒模型转换
语法：box-sizing:content-box/border-box;
content-box 默认值以标准盒模型显示；
border-box 以怪异盒模型来显示；
接下来进入移动端相关概念=>
