如何使用css样式将正方形图片显示为圆形图片布局

css3图片圆形显示如何使用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初始化模板基础上完成。

  <!DOCTYPE html>
  
上一篇:博客园设置回到顶部


下一篇:CSS 闲着无聊读一读,不知不觉学会CSS(六)完