1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 把图标变成圆形的html_css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局...

把图标变成圆形的html_css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局...

时间:2020-09-18 14:46:17

相关推荐

把图标变成圆形的html_css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局...

一、图片实现圆形条件

原本不是圆形图片,通过CSS样式布局实现成圆形图片,首先图片必须为正方形。

二、使用布局技术

使用CSS3 圆角技术实现。

使用CSS3样式单词:border-radius

语法:

div{border-radius:5px}

对图片设置圆角样式:

.abc img{border-radius:5px}

设置class=”abc”对象图片四个角圆角为5px

三、CSS圆角实现图片圆形实例

首先一张正方形图片,放入一个DIV盒子内,通过对盒子内图片设置border-radius:50%实现圆形效果。

本案例在DIVCSS5初始化模板基础上完成。

1、HTML源代码完整代码:

复制代码代码如下:

图片圆形布局 在线演示 DIVCSS5

2、对应CSS代码:

复制代码代码如下:

#divcss5{ margin:10px auto}

#divcss5 img{ border-radius:50%}

命名盒子“id=divcss5”盒子居中,同时上下外间距为10px;,然后设置对象盒子里img图片圆角50%

3、浏览器效果截图

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。