我想知道是否有一个更简单的方法来创建循环div比我现在做的。
目前,我只是为每个不同的大小制作一个图像,但这样做很烦人。
有没有CSS可以让div变成圆形,我可以指定半径?
我想知道是否有一个更简单的方法来创建循环div比我现在做的。
目前,我只是为每个不同的大小制作一个图像,但这样做很烦人。
有没有CSS可以让div变成圆形,我可以指定半径?
当前回答
使用多个(20+)水平或垂直1px div来构建一个圆也是个坏主意。这个jQuery插件使用这个方法来构造不同的形状。
其他回答
这里是一个演示:http://jsfiddle.net/thirtydot/JJytE/1170/
CSS:
.circleBase {
border-radius: 50%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
}
.type1 {
width: 100px;
height: 100px;
background: yellow;
border: 3px solid red;
}
.type2 {
width: 50px;
height: 50px;
background: #ccc;
border: 3px solid #000;
}
.type3 {
width: 500px;
height: 500px;
background: aqua;
border: 30px solid blue;
}
HTML:
<div class="circleBase type1"></div>
<div class="circleBase type2"></div><div class="circleBase type2"></div>
<div class="circleBase type3"></div>
要在IE8及更老版本中使用此功能,必须下载并使用CSS3 PIE。我上面的演示不能在IE8中运行,但这只是因为jsFiddle不支持PIE.htc。
我的演示是这样的:
.circle { 高度:20眼动; 宽度:20眼动; 这个特性:50%; background - color: # EF6A6A; } < div class = "圆" > < / div >
这实际上是可能的。
CSS技巧:如何制作没有图像的圆圈。看到演示。
但要注意的是,它在兼容性方面有严重的缺点,基本上,你是在让猫叫。
看到了吗?
正如你所看到的,你只需要设置高度和宽度为边界半径的一半
好运!
添加css属性:
这个特性:50%;
对任何div都是圆形的。
对于circle,创建一个div元素,然后输入width = 2倍的边框半径= 2倍的填充。同样line-height = 0 例如,用50px作为圆的半径,下面的代码工作得很好:
width: 100px;
padding: 50px 0;
border: solid;
line-height: 0px;
border-radius: 50px;