如何使用纯css实现圆形图像？（代码实例）

基本代码

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

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

.img-circular{
 width: 200px;
 height: 200px;
 background-image: url(&＃39;image/flower.jpg&＃39;);
 background-size: cover;
 display: block;
}

效果如下：

现在我们有了适合我们方形容器的图像。让我们改变CSS代码来制作圆形框架。我们将使用border-radius属性，这给了我们一个机会来绕过它所应用的元素的角。为了让我们实现圆形图像，我们必须给图像一个图像大小一半的值。我们的CSS代码现在看起来像这样：

	.img-circular{
 width: 200px;
 height: 200px;
 background-image: url(&＃39;image/flower.jpg&＃39;);
 background-size: cover;
 display: block;
 border-radius: 100px;
 -webkit-border-radius: 100px;
 -moz-border-radius: 100px;
}

css实现圆形图像的效果如下：

如果你仔细研究了border-radius属性，你可以以非对称的方式操纵图像的角落，具体可以看看以下css代码

.img-circular{
 width: 200px;
 height: 200px;
 background-image: url(&＃39;image/flower.jpg&＃39;);
 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;
}

效果如下：

以上就是如何使用纯css实现圆形图像？（代码实例）的详细内容，更多请关注 第一PHP社区 其它相关文章！