我想知道是否有一个更简单的方法来创建循环div比我现在做的。
目前,我只是为每个不同的大小制作一个图像,但这样做很烦人。
有没有CSS可以让div变成圆形,我可以指定半径?
我想知道是否有一个更简单的方法来创建循环div比我现在做的。
目前,我只是为每个不同的大小制作一个图像,但这样做很烦人。
有没有CSS可以让div变成圆形,我可以指定半径?
当前回答
使用多个(20+)水平或垂直1px div来构建一个圆也是个坏主意。这个jQuery插件使用这个方法来构造不同的形状。
其他回答
我有4个解决方案来完成这个任务:
这个特性 clip-path 伪元素 径向渐变
#circle1 { background-color: #B90136; width: 100px; height: 100px; border-radius: 50px;/* specify the radius */ } #circle2 { background-color: #B90136; width: 100px;/* specify the radius */ height: 100px;/* specify the radius */ clip-path: circle(); } #circle3::before { content: ""; display: block; width: 100px; height: 100px; border-radius: 50px;/* specify the radius */ background-color: #B90136; } #circle4 { background-image: radial-gradient(#B90136 70%, transparent 30%); height: 100px;/* specify the radius */ width: 100px;/* specify the radius */ } <h3>1 border-radius</h3> <div id="circle1"></div> <hr/> <h3>2 clip-path</h3> <div id="circle2"></div> <hr/> <h3>3 pseudo element</h3> <div id="circle3"></div> <hr/> <h3>4 radial-gradient</h3> <div id="circle4"></div>
对于circle,创建一个div元素,然后输入width = 2倍的边框半径= 2倍的填充。同样line-height = 0 例如,用50px作为圆的半径,下面的代码工作得很好:
width: 100px;
padding: 50px 0;
border: solid;
line-height: 0px;
border-radius: 50px;
这里是一个演示: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。
我的演示是这样的:
将元素每边的边框半径设置为50%将创建任意大小的圆形显示:
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
/* width and height can be anything, as long as they're equal */
}
基本上,这使用div的绝对位置来放置一个字符在给定的坐标。利用圆的参数方程,你可以画一个圆。如果你将div的位置改为相对,它会产生一个正弦波…
本质上,我们是在滥用位置性质来画方程。我不精通css,所以有人肯定可以使这更优雅。享受。
这适用于所有的浏览器和移动设备(我知道)。我在自己的网站上使用它来绘制正弦波文本(www.cpixel.com)。此代码的原始源代码可以在这里找到:www.mathopenref.com/coordcirclealgorithm.html
<html>
<head></head>
<body>
<script language="Javascript">
var x_center = 50; //0 in both x_center and y_center will place the center
var y_center = 50; // at the top left of the browser
var resolution_step = 360; //how many times to stop along the circle to plot your character.
var radius = 50; //how big ya want your circle?
var plot_character = "·"; //could use any character here, try letters/words for cool effects
var div_top_offset=10;
var div_left_offset=10;
var x,y;
for ( var angle_theta = 0; angle_theta < 2 * Math.PI; angle_theta += 2 * Math.PI/resolution_step ){
x = x_center + radius * Math.cos(angle_theta);
y = y_center - radius * Math.sin(angle_theta);
document.write("<div style='position:absolute;top:" + (y+div_top_offset) + ";left:"+ (x+div_left_offset) + "'>" + plot_character + "</div>");
}
</script>
</body>
</html>