css3里怎么显示圆形图片
程序员文章站
2022-03-11 18:00:29
...
很多朋友只清楚怎样显示图片，但是不知道怎样用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源代码完整代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>图片圆形布局 在线演示</title> <link href="images/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="div"><img src="images/1.jpg" /></div> </body> </html>
2、对应CSS代码：
#div{ margin:10px auto}
#div img{ border-radius:50%}
用CSS样式布局实现成圆形图片方法就是这么多了。更多精彩请关注其它相关文章！
相关阅读：
以上就是css3里怎么显示圆形图片的详细内容，更多请关注其它相关文章！
上一篇： 如何使用CSS和D3实现用文字组成的心形动画效果（附代码）
下一篇： php实现三级导航栏成效