2014-06-30 13:48:44 div css3实现正方形图片圆形显示，如何实现图片圆形布局，使用CSS3技术实现图片正圆形显示。
正方形图片使用CSS如何实现成圆形布局，不使用PS软件处理，直接使用DIV CSS布局如何实现图片圆形化。
正方形图片实现圆形布局
一、图片实现圆形条件
原本不是圆形图片，通过CSS样式布局实现成圆形图片，首先图片必须为正方形。
二、使用布局技术
使用CSS3 圆角技术实现。
使用CSS3样式单词：border-radius
语法：
- div{border-radius:5px}
对图片设置圆角样式：
- .abc img{border-radius:5px}
设置class=”abc”对象图片四个角圆角为5px
三、CSS圆角实现图片圆形实例
首先一张正方形图片，放入一个DIV盒子内，通过对盒子内图片设置border-radius:50%实现圆形效果。
本案例在Thinkcss初始化模板基础上完成。
1、HTML源代码完整代码：
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>图片圆形布局 在线演示 HTML8</title>
- <link href="images/style.css" rel="stylesheet" type="text/css" />
- <!-- html8.com.cn -->
- </head>
- <body>
- <div id="HTML8"><img src="images/1.jpg" /></div>
- </body>
- </html>
2、对应CSS代码：
- #HTML8{ margin:10px auto}
- #HTML8 img{ border-radius:50%}
命名盒子“id=HTML8”盒子居中，同时上下外间距为10px;，然后设置对象盒子里img图片圆角50%
3、浏览器效果截图
支持CSS3的谷歌浏览器浏览效果截图
4、在线演示：
5、打包下载案例
四、特别说明
本知识图片圆形布局使用了CSS3技术，所以需要支持HTML5+CSS3浏览器才能看到效果（或低版本浏览器支持CSS3圆角实现）。