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

本篇文章主要介绍了" css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局"，主要涉及到方面的内容，对于CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： 一、图片实现圆形条件　　原本不是圆形图片，通过CSS样式布局实现成圆形图片，首先图片必须为正方形。二、使用布局技术　　使用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源代码完整代码：

复制代码

代码如下:

　　
　　
　　
　　
　　
　　
　　
　　
　　
　　

　　
　　

2、对应CSS代码：

复制代码

代码如下:

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

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

3、浏览器效果截图

以上就介绍了 css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局，包括了方面的内容，希望对CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播有兴趣的朋友有所帮助。

本文网址链接：http://www.codes51.com/article/detail_1784744.html