0
0
php中世界最好的语言
发布时间：2017-11-22 16:23:27
|5845人浏览过
|来源于php中文网
原创
很多朋友只清楚怎样显示图片，但是不知道怎样用css样式布局实现成圆形图片，那么今天就来教大家如何用css做出圆形图片的显示
首先图片必须为正方形。
使用布局技术
使用CSS3 圆角技术实现。
使用CSS3样式单词：border-radius
立即学习“前端免费学习笔记（深入）”；
语法：
div{border-radius:5px}对图片设置圆角样式：
.abc img{border-radius:5px}
设置class=”abc”对象图片四个角圆角为5px
CSS圆角实现图片圆形实例
首先一张正方形图片，放入一个DIV盒子内，通过对盒子内图片设置border-radius:50%实现圆形效果。
1、HTML源代码完整代码：
图片圆形布局 在线演示 @@##@@
2、对应CSS代码：
#div{ margin:10px auto}
#div img{ border-radius:50%}用CSS样式布局实现成圆形图片方法就是这么多了。更多精彩请关注php中文网其它相关文章！
相关阅读：
相关文章
HTML5如何实现圆角边框_HTML5实现圆角边框技巧【样式】
jimdo能否添加html5动画_jimdo添加html5动画方法与效果调整【方法】
HTML透明颜色代码在老版本HTML里能用吗_HTML4透明支持情况【说明】
如何用CSS3配合HTML5做动画_CSS3与HTML5结合技巧【融合教程】
CSS3怎么调整字体大小单位_remempx区别及使用场景【解答】
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
相关专题
本专题深入讲解 C++ 中的常见设计模式与架构优化，包括单例模式、工厂模式、观察者模式、策略模式、命令模式等，结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析，帮助开发者掌握 如何运用设计模式构建高质量的软件架构，提升系统的灵活性与可扩展性。
8
2026.01.30
热门下载
精品课程
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
