代码：background-color: red;
代码：background-image: url(icon-s.jpg);
解释：该裁切比较有意思，其实就是图片显示的范围是否在边框显示，是否要显示在内边距里面，还是只是在内容区域（不太懂这个区域的请认真阅读前篇盒子模型）
| 选项 | 说明 |
|---|---|
| border-box | 边框以内都显示（包含边框、内边距、内容） |
| padding-box | 内边距以内都显示（包含内边距、内容） |
| content-box | 内容区域（包含内容） |
代码：background-clip: border-box;//默认就是这个
解释：一般需要使用no-repeat这个属性
| 选项 | 说明 |
|---|---|
| repeat | 水平、垂直重复 |
| repeat-x | 水平重复 |
| repeat-y | 垂直重复 |
| no-repeat | 不重复 |
| space | 背景图片对称均匀分布 |
代码：background-repeat:repeat;//默认就是这个
解释：使用背景固定可以实现一种很好看的效果
| 选项 | 说明 |
|---|---|
| scroll | 背景滚动 |
| fixed | 背景固定 |
代码：background-attachment: scroll;// 默认就是这个
解释：原理是盒子不动，背景图片在背后移动（默认图片显示在左上角），相当于在盒子里面展示出露出来的内容；使用用处很大，可以布局图片显示，还可以把好多小图标放一个图片里面改变背景位置显示不同图标
| 选项 | 说明 |
|---|---|
| left | 左对齐 |
| right | 右对齐 |
| center | 居中对齐 |
| top | 顶端对齐 |
| bottom | 底部对齐 |
| x y | 负值表示向右向下，正值表示向左向上 |
代码：background-position: center;background-position: 0 90px;// 水平 和 竖直
解释：背景尺寸设置，默认图片按其大小只显示左上角（根据盒子大小显示）
| 选项 | 说明 |
|---|---|
| cover | 保持图像的纵横比并将图片缩放一部分，保证能填充满盒子，可能不会完整展示 |
| contain | 保持图像的纵横比并将图片缩放保证能完整展示，可能会没有填充满整个盒子 |
| x(宽 ) y(高) | 设置尺寸（可能会改变纵横比） |
| 50px auto | auto可以根据另一项设置的尺寸，保证auto所在这项与另一项尺寸想对应（即保持纵横比） |
代码：background-size: 100% 100%;//改变纵横比全填充进去;background-size:cover;
解释：参数分别为水平偏移,垂直偏移,模糊度,颜色
代码：box-shadow: 10px 10px 5px rgba(100, 100, 100, .5);
解释：代码主要为linear-gradient(red, green);用的比较少，可以自行查询资料