hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - CSS - 正文 请牢记本站网址www.sosophp.cn

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

2019-11-26CSS搜搜PHP网49°c
A+ A-
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网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
怎样运用纯CSS完成圆形图象?【css教程】

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签: