| 属性 | 属性值 | 描述 | |||||
|---|---|---|---|---|---|---|---|
| background-color | 单词颜色表示法、rgb、十六进制 | 设置元素的背景颜色 | |||||
| background-image | url(‘http://www.aaa.com/1.png‘) | 给一个元素设置一个或多个背景图像 | |||||
| background-position | top,left,center,百分比，px, | 为每一个背景图片设置初始位置 | |||||
| background-repeat | repeat-x\ | repeat-y\ | repeat\ | spance\ | round\ | no-repeat | 定义背景图像的重复方式。 背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。 |
background-size
背景图比例
使用雪碧图的使用场景
静态图片，不随用户信息的变化而变化
小图片，图片容量比较小(2~3k)
加载量比较大
一些大图不建议制作雪碧图
优点
有效的减少HTTP请求数量
加速内容显示
每次请求一次，就会和服务器连接一次，建立连接是需要额外的时间开销的。
雪碧图的实现原理
它通过css的背景属性的backrground-position的来控制雪碧图的显示。
控制一个层，可显示的区域范围大消息，通过一个窗口，进行背景图的移动。
border-radius
圆角属性
画圆
border-radius: 50%;圆环
border: 3px solid #FC0107;
border-radius: 50%;box-shadow 阴影
语法：
box-shadow: h-shadow v-shadow blur color inset;| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊距离。 |
| color | 可选。阴影的颜色。 |
| inset | 可选。将外部阴影 (outset) 改为内部阴影。 |
原文：https://www.cnblogs.com/zx125/p/11664289.html