更容易创build圆形div比使用图像？
我想知道是否有一个更简单的方法来创build圆形divs比我现在做的。
目前，我只是为每个不同的大小制作一个图像，但这样做很烦人。
反正使用CSS来使div是圆形的，我可以指定半径？
这是一个演示： 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没有托pipePIE.htc 。
我的演示看起来像这样：
将元素的每一边的边框半径设置为50％将会创build任意大小的圆形显示：
.circle { border-radius: 50%; width: 200px; height: 200px; /* width and height can be anything, as long as they're equal */ }
尝试这个
.iphonebadge { border-radius:99px; -moz-border-radius:99px; -webkit-border-radius:99px; background:red; color:#fff; border:3px #fff solid; background-color: #e7676d; background-image: -webkit-gradient(linear, left top, left bottom, from(#e7676d), to(#b7070a)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(top, #e7676d, #b7070a); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(top, #e7676d, #b7070a); /* FF3.6 */ background-image: -ms-linear-gradient(top, #e7676d, #b7070a); /* IE10 */ background-image: -o-linear-gradient(top, #e7676d, #b7070a); /* Opera 11.10+ */ background-image: linear-gradient(top, #e7676d, #b7070a); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e7676d', EndColorStr='#b7070a'); -webkit-box-shadow: 0px 2px 4px #000000; /* Saf3-4 */ -moz-box-shadow: 0px 2px 4px #000000; /* FF3.5 - 3.6 */ box-shadow: 0px 2px 4px #000000; /* Opera 10.5, IE9, FF4+, Chrome 10+ */ display:inline-block; padding:2px 2px 2px 2px ; margin:3px; font-family:arial; font-weight:bold; }
这实际上是可能的。
请参阅： CSS提示：如何创build没有图像的圆圈 。 看演示 。
但是要注意的是，从基本兼容性的angular度来看，它是有严重的缺点的， 就是在做一个猫叫。
看到它在 这里 工作
正如你所看到的，你只需要将height和width设置为border-radius一半
祝你好运！
也有[使用几个（20+）水平或垂直的1px div来构造一个圆的坏主意。 这个jQuery插件使用这种方法来构build不同的形状。
给宽度和高度取决于大小，但保持相等
.circle { background-color: gray; height: 400px; width: 400px; border-radius: 100%; }
<div class="circle"> </div>
您可以使用半径，但它不会在IE浏览器上工作： border-radius: 5px 5px; 。
.fa-circle{ color: tomato; } div{ font-size: 100px; }
<link href="font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <div><i class="fa fa-circle" aria-hidden="true"></i></div>
基本上这使用div的绝对位置来放置一个字符在给定的坐标。 所以使用参数方程为一个圆，你可以画一个圆。 如果你想把div的位置改成相对的话，就会产生正弦波
实质上，我们通过滥用职位属性来绘制方程式。 我不熟悉CSS，所以有人可以使这更优雅。 请享用。
这适用于所有的浏览器和移动设备（我知道）。 我在自己的网站上使用它来绘制正弦波（www.cpixel.com）。 这个代码的原始来源可以在这里find：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>
你可以尝试radial-gradient CSSfunction：
.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>
