本文所分享的知识点是【css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局】，欢迎您喜欢我爱IT技术网所分享的教程、知识、经验或攻略，下面是详细的讲解。
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源代码完整代码：
代码如下: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片圆形布局 在线演示 DIVCSS5</title>
<link href="http://www.bitscn.com/school/HTMLCSS/201412/images/style.css" rel="stylesheet" type="text/css" />
<!-- http://www.bitsCN.com/-->
</head>
<body>
<div id="divcss5"><img src="http://www.bitscn.com/school/HTMLCSS/201412/images/1.jpg" /></div>
</body>
</html>
2、对应CSS代码：
代码如下: #divcss5{ margin:10px auto}
#divcss5 img{ border-radius:50%}
命名盒子“id=divcss5”盒子居中，同时上下外间距为10px;，然后设置对象盒子里img图片圆角50%
3、浏览器效果截图
关于css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局的相关讨论如下：
相关问题：html如何使图片只显示其中圆形部分
答：建议直接用photoshop把中间挖出来即可，用css3可以显示圆形，但不太好拿捏，所以建议直接挖出来；这样大图本身也占空间，没必要 >>详细
相关问题：用css3如何让安卓机上面的图片变成圆形
答：css3的圆角样式 border-radius就可以做到了， 圆形，就把四个角都设置成宽高的一半，就是50%，或者是固定值，， 注意的是，如果你是直接用Img标签的话，那你的Img 宽高要一样，就是说要是正方形， 如果你是通过容器来实现的话，你就直接把容器设... >>详细
相关问题：如何使用css让图片显示圆角
答：使用css让图片显示圆角，首先需要理解，一般图片都是用一个div包裹，不一定要直接去改图片，可以去直接改包裹图片的div，圆角的话，是需要使用css3才能实现的border-radius来实现的，border-radius:5px 15px 20px 25px;顺序依次是上右下左，具体... >>详细
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-