怎样运用纯CSS实现圆形图像?
发布时间:09/01 来源:未知 浏览:
关键词:
我们从根本的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; }
运转结果如下:图片变成了圆形
本篇文章到这里就已经全部完毕了,更多出色内容大家可以关注PHP中文网的CSS视频教程栏目!!!
以上就是怎样使用纯CSS实现圆形图像?的具体内容,更多请关注百分百源码网其它相关文章!