1. 背景样式
- background-clip
CSS2背景显示范围不包括边框。CSS2.1和CSS3包括边框。
CSS3可以用background-clip调整背景显示范围：
/**
* 在FireFox加上-moz-前缀，Safari、Chrome、Opera，加上-webkit-前缀
*/
background-clip: border; //包括边框在内
background-clip: padding; //不包括边框
- background-origin
指定背景图像绘制起始点
/**
* 在FireFox加上-moz-前缀，Safari、Chrome、Opera，加上-webkit-前缀
*/
background-origin: border; // 从边框左上角开始绘制
background-origin: padding; // 从内部补白左上角开始绘制
background-origin: content; // 从内容左上角开始绘制
- background-size
指定背景图像的尺寸
/**
* 在FireFox加上-moz-前缀，Safari、Chrome、Opera，加上-webkit-前缀
*/
background-size: 40px 20px; // 背景图像宽度40px，高度20px
background-size: 40px auto; // 将一种一个设为auto，维持图像纵横比例
// 图像维持纵横比的前提下，自动缩放至充满元素的宽度或高度
background-size: contain;
// 图像维持纵横比的前提下，自动缩放到填满元素内部。多余部分被剪去
background-size: cover;
- background-repeat
在CSS2.1时，有no-repeat、repeat、repeat-x与repeat-y4个选项。但是平铺之后超出部分会被直接裁剪掉。
CSS3中，添加了space和round，控制在水平或垂直方向平铺背景，并且不裁剪超出部分，而是以调整平铺图像之间的间距方式（IE8不支持）。
background-repeat: space; // 横线平铺，自动调整图像间间距，不裁剪超出部分
background-repeat: round; // 纵向平铺，自动调整图像间间距，不裁剪超出部分
- 背景渐变
background: linear-gradient(to bottom, orange, black);
background: radial-gradient(orange, black);
2. 边框样式
- 圆角边框
border-radius: 10px; // 半径10px的圆角
border-radius: 10px 20px; // 左上和右下10px，右上和左下20px
border-top-left-radius: 10px; // 左上10px
border-top-right-radius: 20px; // 右上20px
border-bottom-right-radius: 30px; // 右下30px
border-bottom-left-radius: 40px; // 左下40px
- 图像边框（基本不会用到，不做了解）
