我想知道是否有一个更简单的方法来创建循环div比我现在做的。
目前,我只是为每个不同的大小制作一个图像,但这样做很烦人。
有没有CSS可以让div变成圆形,我可以指定半径?
我想知道是否有一个更简单的方法来创建循环div比我现在做的。
目前,我只是为每个不同的大小制作一个图像,但这样做很烦人。
有没有CSS可以让div变成圆形,我可以指定半径?
当前回答
假设你有这样的图像:
要做出一个圆,你只需要加
.circle {
border-radius: 50%;
width: 100px;
height: 100px;
}
如果你有一个div,你可以做同样的事情。
请看下面的例子:
.circle { 这个特性:50%; 宽度:100 px; 身高:100 px; 动画:堆叠溢出的例子无限20秒线性; pointer-events:没有; } @keyframes stackoverflow { 从{ 变换:旋转(0度); } , { 变换:旋转(360度); } } < div > <img class="circle" src="https://www.sitepoint.com/wp-content/themes/sitepoint/assets/images/icon.javascript.png"> < / div >
其他回答
使用多个(20+)水平或垂直1px div来构建一个圆也是个坏主意。这个jQuery插件使用这个方法来构造不同的形状。
你可以使用半径,但它不会工作在IE: border-radius: 5px 5px;。
你可以试试径向渐变CSS函数:
.circle {
width: 500px;
height: 500px;
border-radius: 50%;
background: #ffffff; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #ffffff 17%, #ff0a0a 19%, #ff2828 40%, #000000 41%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
应用到一个div图层:
<div class="circle"></div>
宽度和高度取决于大小,但要保持两者相等 .circle { 背景颜色:灰色; 身高:400 px; 宽度:400 px; 这个特性:100%; } < div class = "圆" > < / div >
这实际上是可能的。
CSS技巧:如何制作没有图像的圆圈。看到演示。
但要注意的是,它在兼容性方面有严重的缺点,基本上,你是在让猫叫。
看到了吗?
正如你所看到的,你只需要设置高度和宽度为边界半径的一半
好运!