如何用CSS将正方形图片显示为圆形图片布局-创新互联

本篇内容主要讲解“ 如何用CSS将正方形图片显示为圆形图片布局”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“ 如何用CSS将正方形图片显示为圆形图片布局”吧!

创新互联建站专注骨干网络服务器租用10年，服务更有保障！服务器租用，德阳服务器托管 成都服务器租用，成都服务器托管，骨干网络带宽，享受低延迟，高速访问。灵活、实现低成本的共享或公网数据中心高速带宽的专属高性能服务器。

一、图片实现圆形条件

原本不是圆形图片，通过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将正方形图片显示为圆形图片布局-创新互联
网站URL：http://bzwzjz.com/article/gehgi.html