如何使用CSS制作圆形图像(示例)

・3 分钟阅读

曾经想知道如何制作那些花哨的圆形图像,而且无需在Photoshop中编辑它们?这其实简单,

基本代码

让我们从这个(我假设你可以设置一个空白的HTML文档并将样式表链接到它)的基本HTML和CSS开始。

<div class="img-circular"></div>

让我们为img-circular设置一个基本样式。


.img-circular{
 width: 200px;
 height: 200px;
 background-image: url('http://strawberry-fest.org/wp-content/uploads/2012/01/Coca-Cola-logo.jpg');
 background-size: cover;
 display: block;
}

您可能不熟悉的唯一事情是第5行.background-size是一个新的CSS3属性,它可以使用背景的尺寸进行操作。你可以通过输入精确的像素值,百分比或使background覆盖或使它适合整个容器来设置它的宽度和高度。

把事情做好

现在我们有了图像,它符合我们的方形容器,让我们改变CSS代码来制作圆形框架,我们会用 border-radius属性 ,这使我们有机会围绕它应用的元素的角落。为了使我们的图像循环,我们必须使用值,这是图像大小值的一半。我们的CSS文件现在看起来像这样:


.img-circular{
 width: 200px;
 height: 200px;
 background-image: url('http://strawberry-fest.org/wp-content/uploads/2012/01/Coca-Cola-logo.jpg');
 background-size: cover;
 display: block;
 border-radius: 100px;
 -webkit-border-radius: 100px;
 -moz-border-radius: 100px;
}

你已经完成了新的CSS属性允许我们创建效果,可以节省你宝贵的ps时间,

进一步扩展

尝试下面的CSS代码发生了什么?


.img-circular{
 width: 200px;
 height: 200px;
 background-image: url('http://strawberry-fest.org/wp-content/uploads/2012/01/Coca-Cola-logo.jpg');
 background-size: cover;
 display: block;
 border-top-left-radius: 100px;
 -webkit-border-top-left-radius: 100px;
 -moz-border-top-left-radius: 100px;
 border-bottom-right-radius: 100px;
 -webkit-border-bottom-right-radius: 100px;
 -moz-border-bottom-right-radius: 100px;
}

要查看本教程的效果,请访问此jfiddle页

学以致用 profile image