Css display & background-

2017-07-05 / 0 评论 / 32 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年10月27日,已超过209天没有更新,若内容或图片失效,请留言反馈。

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

0

评论 (0)

取消