css圆，背景,img填满等样式

background

属性	属性值	描述
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

背景图比例

CSS Sprite雪碧图技术

使用雪碧图的使用场景

静态图片，不随用户信息的变化而变化

小图片，图片容量比较小(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) 改成内部阴影。

img拉伸填满

min-height: 130px; 图片的高度能够大于130px，若是小于130px拉成130
max-width: 130px; 图片的宽度能够小于130px，若是大于130压缩成130px