css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
来源:互联网 发布:气象数据 英文缩写 编辑:程序博客网 时间:2024/06/05 06:23
正方形图片使用CSS如何实现成圆形布局,不使用PS软件处理,直接使用DIV CSS布局如何实现图片圆形化。
正方形图片实现圆形布局
一、图片实现圆形条件 - TOP
原本不是圆形图片,通过CSS样式布局实现成圆形图片,首先图片必须为正方形。
二、使用布局技术 - TOP
使用CSS3 圆角技术实现。
使用CSS3样式单词:border-radius
语法:
- div{border-radius:5px}
对图片设置圆角样式:
- .abc img{border-radius:5px}
设置class=”abc”对象图片四个角圆角为5px
三、CSS圆角实现图片圆形实例 - TOP
首先一张正方形图片,放入一个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" />
- <!-- www.divcss5.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、浏览器效果截图
支持CSS3的谷歌浏览器浏览效果截图
例子:http://www.divcss5.com/yanshi/2014/2014063001/
引用:http://www.divcss5.com/wenji/w732.shtml
0 0
- css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
- css 正方形图片显示为圆形
- 正方形图片变圆形css
- 将正方形图片变成圆形
- 将正方形图片转成圆形图片
- imageview显示圆形图片
- 自定义显示圆形图片
- ImageView图片圆形显示
- cardView显示圆形图片
- 显示圆形图片
- 使用css将图片切为圆形
- 正方形图片切成圆形
- 如何将一个图片显示在一个圆形区域里?
- Blackberry 10如何显示圆形图片
- 将图片剪裁为圆形
- ImageView的圆形图片显示
- android 圆形图片的显示
- 图片images样式- 圆形显示
- 使用OC和Swift两种语言写一个发射烟花的小项目
- 【例题】【图论&DP(状压)】NKOJ 1905 慢跑小路 【S2状态压缩】
- 当dex分包遇上NoClassDefFoundError&ClassNotFoundException
- Android 中把 资源id 转换为URi
- 最长公共子序列
- css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
- 单链表插入排序
- ddd
- myeclipse struts环境搭建
- 利用jsonrpc技术包装uiautomator
- Java 多线程的详解
- 新的管理门户 ibiza 中管理azure redis
- jQuery学习<六> — — Dom元素的特性(attribute)和属性(property)
- C++的数值归并代码