本篇内容主要讲解“ 如何用CSS将正方形图片显示为圆形图片布局”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“ 如何用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源代码完整代码：
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片圆形布局 在线演示 DIVCSS5</title>
<link href="images/style.css" rel="stylesheet" type="text/css" />
<!-- https://www.yisu.com/-->
</head>
<body>
<div id="divcss5"><img src="images/1.jpg" /></div>
</body>
</html>
2、对应CSS代码：
代码如下:
#divcss5{ margin:10px auto}
#divcss5 img{ border-radius:50%}
命名盒子“id=divcss5”盒子居中，同时上下外间距为10px;，然后设置对象盒子里img图片圆角50%
3、浏览器效果截图
到此，相信大家对“ 如何用CSS将正方形图片显示为圆形图片布局”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
