旗下导航:搜·么
当前位置:网站首页 > CSS > 正文

怎样运用纯CSS完成圆形图象?【css教程】

作者:搜搜PHP网发布时间:2019-11-26分类:CSS浏览:70


导读:CSS能够完成网页中的许多效果,那末我们怎样运用纯CSS完成圆形图象呢?本篇文章我们就来引见关于CSS完成圆形图象的要领,下面来看细致的内容。我们从基础的HTML和CS...
CSS能够完成网页中的许多效果,那末我们怎样运用纯CSS完成圆形图象呢?本篇文章我们就来引见关于CSS完成圆形图象的要领,下面来看细致的内容。

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

标签:CSS