当前第2页 返回上一页
我们设置好了图像后让我们来改变CSS代码来制作圆形框架。我们将使用border-radius属性，这使我们可以改变元素的角的弧度。为了使图像成为圆形，我们的CSS文件现在看起来如下：
1 2 3 4 5 6 7 8 9 10 | .img-circular{
width: 200px;
height: 200px;
background-image: url('img/tupian.jpg');
background-size: cover;
display: block;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
}
|
运行结果如下：图片变成了圆形
本篇文章到这里就已经全部结束了，更多精彩内容大家可以关注PHP中文网的CSS视频教程栏目！！！
以上就是如何使用纯CSS实现圆形图像？的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
css居中对齐怎么设置
css中怎么设置table边框的颜色
css 等宽字体有哪些
什么是css伪类
css counter-increment属性怎么用
html怎么设置button大小及颜色
css文字居中怎么打
css的display属性有哪些
css样式“list-style:none”是什么意思？
实现弹幕效果的方法总结（css和canvas）
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 如何使用纯CSS实现圆形图像？
