bootstrap怎么把div变成一个圆

PHP中文网 JavaScript

本文摘自PHP中文网，作者(*-*)浩，侵删。

border-radius，国内翻译成圆角，你可能以为这个属性就是用来画圆角，没错，但是除此之外，它还可以做点别的事情。

radius其实指的是边框所在圆的半径，这个CSS3属性不仅能够创建圆角，还可以创建圆形，把这些角按照不同的顺序和大小来展现，能够绘制成多种多样的图形。（推荐学习：Bootstrap视频教程）

利用border-radius将标签设置成圆形，只要将border-radius的值设置成50%，就可以变成圆形。

实例：

1

2

3

4

5

6

7

8

9

<html>

    <head>

 

    </head>

    <body style="width: 99%;height: 1000px;">

        <div style="width:100px;height:100px;background-color:#000000;border-radius:50%;"></div>

        <input type="button" style="width: 100px;height: 100px;background-color: #000000;border-radius:50%;" />

    </body>

</html>

效果图：

bdiv.png

更多Bootstrap相关技术文章，请访问Bootstrap教程栏目进行学习！

以上就是bootstrap怎么把div变成一个圆的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

如何解决bootstrap 图标不显示的问题

bootstrap有什么ui框架？

vue cli3引入bootstrap的方法介绍

bootstrap置信区间如何求

bootstrap4如何设置下拉菜单

深入了解bootstrap中的弹出框

bootstrap-select下拉框如何清除选中的状态？

bootstrap table中toolbar新增条件查询及refresh参数使用方法

什么是bootstrap框架？

bootstrap什么时候出现的

更多相关阅读请进入《bootstrap》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...