我想知道是否有一个更简单的方法来创建循环div比我现在做的。
目前,我只是为每个不同的大小制作一个图像,但这样做很烦人。
有没有CSS可以让div变成圆形,我可以指定半径?
我想知道是否有一个更简单的方法来创建循环div比我现在做的。
目前,我只是为每个不同的大小制作一个图像,但这样做很烦人。
有没有CSS可以让div变成圆形,我可以指定半径?
当前回答
使用多个(20+)水平或垂直1px div来构建一个圆也是个坏主意。这个jQuery插件使用这个方法来构造不同的形状。
其他回答
使用多个(20+)水平或垂直1px div来构建一个圆也是个坏主意。这个jQuery插件使用这个方法来构造不同的形状。
你可以使用半径,但它不会工作在IE: border-radius: 5px 5px;。
将元素每边的边框半径设置为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 >
假设你有这样的图像:
要做出一个圆,你只需要加
.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 >