当前第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实现tab页切换效果
css怎么显示svg图片
css hover怎么设置
老司机来和你谈谈，为什么说css是最难的！！
css背景图片怎么设置透明度渐变
怎样在css里更改字体大小
css怎么设置阴影效果
如何利用css画出一个三角形
html5实践-使用css装饰图片画廊的代码分享（一）
css中的“>”是什么意思
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 如何使用纯CSS实现圆形图像？
