正方形图片使用​​CSS​​​如何实现成圆形布局，不使用PS软件处理，直接使用​​DIV CSS​​布局如何实现图片圆形化。


css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局_html


正方形图片实现圆形布局

一、图片实现圆形条件   -   ​​TOP​​

原本不是圆形图片，通过​​CSS样式​​布局实现成圆形图片，首先图片必须为正方形。

二、使用布局技术   -   ​​TOP​​

使用​​CSS3 圆角​​技术实现。

使用​​CSS3​​​样式单词：​​border-radius​​

语法：


  1. div{border-radius:5px} 


对图片设置圆角样式：


  1. .abc img{border-radius:5px} 


设置class=”abc”对象图片四个角圆角为5px

三、CSS圆角实现图片圆形实例   -   ​​TOP​​

首先一张正方形图片，放入一个DIV盒子内，通过对盒子内图片设置border-radius:50%实现圆形效果。

本案例在​​DIVCSS5初始化模板​​基础上完成。

1、​​HTML源代码​​完整代码：


  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8" /> 
  5. <title>图片圆形布局 在线演示 DIVCSS5</title> 
  6. <link href="images/style.css" rel="stylesheet" type="text/css" /> 
  7. <!-- www.divcss5.com --> 
  8. </head> 
  9. <body> 
  10. <div id="divcss5"><img src="images/1.jpg" /></div> 
  11. </body> 
  12. </html> 


2、对应CSS代码：


  1. #divcss5{ margin:10px auto} 
  2. #divcss5 img{ border-radius:50%} 


命名盒子“id=divcss5”​​盒子居中​​，同时上下外间距为10px;，然后设置对象盒子里img图片圆角50%

3、浏览器效果截图


css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局_html_02


支持CSS3的谷歌浏览器浏览效果截图

例子：http://www.divcss5.com/yanshi/2014/2014063001/

引用：http://www.divcss5.com/wenji/w732.shtml