如何用CSS将正方形图片显示为圆形图片布局
本篇内容主要讲解“ 如何用CSS将正方形图片显示为圆形图片布局”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“ 如何用CSS将正方形图片显示为圆形图片布局”吧!
创新互联建站成立于2013年,是专业互联网技术服务公司,拥有项目网站制作、做网站网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元泰兴做网站,已为上家服务,为泰兴各地企业和个人服务,联系电话:18982081108
一、图片实现圆形条件
原本不是圆形图片,通过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源代码完整代码:
代码如下:
2、对应CSS代码:
代码如下:
#divcss5{ margin:10px auto}
#divcss5 img{ border-radius:50%}
命名盒子“id=divcss5”盒子居中,同时上下外间距为10px;,然后设置对象盒子里img图片圆角50%
3、浏览器效果截图
到此,相信大家对“ 如何用CSS将正方形图片显示为圆形图片布局”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
网站栏目:如何用CSS将正方形图片显示为圆形图片布局
当前路径:http://pwwzsj.com/article/pepijd.html