提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > 怎样运用纯CSS完成圆形图象?【css教程】,CSS

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网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线