我想知道是否有一个更简单的方法来创建循环div比我现在做的。
目前,我只是为每个不同的大小制作一个图像,但这样做很烦人。
有没有CSS可以让div变成圆形,我可以指定半径?
我想知道是否有一个更简单的方法来创建循环div比我现在做的。
目前,我只是为每个不同的大小制作一个图像,但这样做很烦人。
有没有CSS可以让div变成圆形,我可以指定半径?
当前回答
宽度和高度取决于大小,但要保持两者相等 .circle { 背景颜色:灰色; 身高:400 px; 宽度:400 px; 这个特性:100%; } < div class = "圆" > < / div >
其他回答
将元素每边的边框半径设置为50%将创建任意大小的圆形显示:
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
/* width and height can be anything, as long as they're equal */
}
宽度和高度取决于大小,但要保持两者相等 .circle { 背景颜色:灰色; 身高:400 px; 宽度:400 px; 这个特性:100%; } < div class = "圆" > < / div >
这实际上是可能的。
CSS技巧:如何制作没有图像的圆圈。看到演示。
但要注意的是,它在兼容性方面有严重的缺点,基本上,你是在让猫叫。
看到了吗?
正如你所看到的,你只需要设置高度和宽度为边界半径的一半
好运!
.circle { 高度:20眼动; 宽度:20眼动; 这个特性:50%; background - color: # EF6A6A; } < div class = "圆" > < / div >
.fa-circle { 颜色:番茄; } div { 字体大小:100 px; } <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> < div > <我类=“fa fa-circle”aria-hidden = " true " > < / i > < / div >
只是想提到另一个解决方案,回答“更容易的方法创建圆div比使用图像?”这是使用FontAwesome。
你导入fontawesome css文件或从这里的CDN
然后你就:
<div><i class="fa fa-circle" aria-hidden="true"></i></div>
你可以给它任意颜色任意字体大小。