我们从基础的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网别的相干文章!