bootstrap4怎么倒圆角

 剑鱼论坛 发表于 2020年01月13日 CSS/CSS3  93
剑鱼论坛
LV 5 [初中]
最后在线:52分钟前
加入时间:262天前
主帖:83  跟帖:44

bootstrap4可以方便地对元素倒圆角,我们来看一下怎么实现。

默认情况下,一个元素的宽度和高度确定后,这个元素是方形的,也就是说其四个角是棱角的。有的时候为了页面元素有些变化,或者要更美观一些,我们需要把方方正正的四个角弄成圆弧型的,这可以使用css样式来实现,但是这篇我们介绍的是bootstrap,那么我们来看一下怎么用bootstrap来实现圆角。

bootstrap4已经为我们提供了简单的圆角样式,我们只需要在HTML中使用就可以了。看下面的代码:

<img src="..." class="rounded">

熟悉HTML的朋友一定知道上面的代码表示输出一个图片,这里的图片地址我们用省略号表示了,您自己实践的时候换成自己的图片就可以了。同时,我还给这个代码加上了样式“rounded”,这个样式就表示圆角,有了这个样式后,图片在页面上显示就不是方方正正了,而是四个角带有弧度,比较好看些。

当然,您还可以设置部分角为圆角,如下:

rounded-top:上面两个角倒圆角

rounded-right:右边两个角倒圆角

rounded-bottom:下面两个角倒圆角

rounded-left:左边两个角倒圆角

更进一步,我们还可以把元素设置成圆形或者椭圆形:

rounded-circle:圆形

rounded-pill:椭圆形

再进一步,如果您需要把某个已经有圆角的元素去除圆角的话,那么我们可以使用下面的样式:

rounded-0:去除圆角

好了,bootstrap4的圆角设置是不是很简单,只需要加个样式就可以了。

论坛主帖
145
论坛跟帖
110
在线访客
2
今日主帖
0
今日跟帖
0
今日注册
0
81
http://jianyuluntan.com/gentie.html
http://jianyuluntan.com/postzan.html
http://jianyuluntan.com/postcai.html
http://jianyuluntan.com/postshoucang.html
http://jianyuluntan.com/gentiezan.html
http://jianyuluntan.com/gentiecai.html
http://jianyuluntan.com/huifu.html
http://jianyuluntan.com/xiugai.html
http://jianyuluntan.com/shanchugentie.html
1
XzA=
1
© 2019 - 2020 剑鱼论坛 版权所有
Powered by JianYuLunTan
剑鱼论坛 976666861
http://jianyuluntan.com/feedback.html
http://jianyuluntan.com/qiandao.html
http://jianyuluntan.com/denglu.html
0
http://jianyuluntan.com/adenglu.html