笔记大全

bootstrap如何把div变成一个圆

更新时间：2023-12-03

Bootstrap如何把div变成一个圆？

为了能够将一个div转换成圆形，有几种方法可供选择。下面我将向你介绍其中的三种方法。

方法一：使用border-radius

使用border-radius属性，可以轻松地将一个

元素转换成圆形。


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

上面的代码将生成一个大小为100x100像素的蓝紫色圆形div。

方法二：使用Bootstrap的CSS类

Bootstrap提供了许多有用的CSS类。其中之一是"rounded-circle"，它可以将一个正方形图像转换成圆形图像。


     <div class="rounded-circle" 
        style="background-color: blueviolet; 
        width: 100px; height: 100px;  
        "></div>

上面的代码将生成一个大小为100x100像素的蓝紫色圆形div。

方法三：使用CSS3动画

CSS3动画也可以用来将一个div元素变成圆形。下面的代码将使用CSS3动画来实现这一目的。


    <div id="myDiv" 
        style="background-color: blueviolet; 
        width: 100px; height: 100px;">
    </div>

    <style>
        #myDiv {
            -webkit-animation: circle 2s;
            animation: circle 2s;
        }
        
        @-webkit-keyframes circle {
            0% {
                border-radius: 0;
            }
            100% {
                border-radius: 50%;
            }
        }
        
        @keyframes circle {
            0% {
                border-radius: 0;
            }
            100% {
                border-radius: 50%;
            }
        }
    </style>

上面的代码将生成一个大小为100x100像素的蓝紫色圆形div，动画持续时间为2秒。

c语言编程笔录