我们从基础的HTML和CSS最先(假定你能够竖立一个空缺的HTML文档并将款式表链接到它)。
<div class="img-circular"></div>
让我们为类img-circular设置一个基础款式。
.img-circular{
width: 200px;
height: 200px;
background-image: url('img/tupian.jpg');
background-size: cover;
display: block;
}
上述代码中background -size是CSS3的一个新属性，能够运用其操纵背景的尺寸。能够经由过程输入准确的像素值，百分比来设置它的宽度和高度，或许制造背景封面来使其合适悉数页面。
我们设置好了图象后让我们来转变CSS代码来制造圆形框架。我们将运用border-radius属性，这使我们能够转变元素的角的弧度。为了使图象成为圆形，我们的CSS文件如今看起来以下：
.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;
}
运转效果以下：图片变成了圆形
本篇文章到这里就已悉数完毕了，更多精彩内容人人能够关注ki4网的CSS视频教程栏目！！！
以上就是怎样运用纯CSS完成圆形图象？的细致内容，更多请关注ki4网别的相干文章！
