Css display & background-

王佶
2017/07/05 11:55
统计中

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

本文为 王佶 原创

发布在 http://blog.minws.com/untitled/

如有转载,请标明来源!

作者信息
姓名:王佶
地址:南通
签名:美好的程序媛
热评文章
最新评论
文章概览