如何使用css样式将正方形图片显示为圆形图片布局 | 您所在的位置:网站首页 › 图片怎么弄成圆形的形状 › 如何使用css样式将正方形图片显示为圆形图片布局 |
css3图片圆形显示如何使用css样式将正方形图片显示为圆形图片布局
1、图片实现圆形条件
2、使用布局技术
3、CSS圆角实现图片圆形实例
1、图片实现圆形条件
原本不是圆形图片,通过CSS样式布局实现成圆形图片,首先图片必须为正方形。 2、使用布局技术使用CSS3 圆角技术实现。 使用CSS3样式单词:border-radius 语法: div{border-radius:5px}对图片设置圆角样式: .abc img{border-radius:5px}设置class=”abc”对象图片四个角圆角为5px 3、CSS圆角实现图片圆形实例首先一张正方形图片,放入一个DIV盒子内,通过对盒子内图片设置border-radius:50%实现圆形效果。 本案例在DIVCSS5初始化模板基础上完成。 |
CopyRight 2018-2019 实验室设备网 版权所有 |