ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-04-27 18:29:13  阅读:231  来源: 互联网

标签:圆角 样式 正方形 圆形 radius border 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>
  

标签:圆角,样式,正方形,圆形,radius,border,css,图片
来源: https://blog.csdn.net/guo_qiangqiang/article/details/116207063

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有