Css display & background-

how to make a circle for a element by css.

1. see code:

.user {
  display: inline-block;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

2. description:

2.1. display: inline-block; CSS 定位属性（Positioning）

inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）会换行

2.2. border-radius: 50%; CSS 边框属性（Border 和 Outline）

border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性.
提示: 该属性允许您为元素添加圆角边框！

语法: border-radius: 1-4 length|% / 1-4 length|%;

length: 定义圆角的形状。
% : 以百分比定义圆角的形状。

test it: css_border-radius

example:
border-radius:2em;
等价于

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

see details: border-radius

2.3. background-repeat: no-repeat; CSS 背景属性（Background）

定义和用法:

background-repeat 属性设置是否及如何重复背景图像。
默认地，背景图像在水平和垂直方向上重复

详细说明:

background-repeat 属性定义了图像的平铺模式
从原图像开始重复，原图像由 background-image 定义，并根据 background-position 的值放置。

提示和注释

提示：背景图像的位置是根据 background-position 属性设置的。如果未规定 background-position 属性，图像会被放置在元素的左上角。

可能的值

2.4. background-position: center center; CSS 背景属性（Background）

定义和用法

background-position 属性设置背景图像的起始位置。
这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。

提示：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。

{
  background-image:url('/i/eg_bg_03.gif');
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:center;
}

可能的值

2.5. background-size: cover; CSS 背景属性（Background）

background-size 属性规定背景图像的尺寸。
cover:
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中.

see details : background-size