创建圈div比使用图像更容易的方法?

我想知道是否有一个更简单的方法来创建循环div比我现在做的。

目前，我只是为每个不同的大小制作一个图像，但这样做很烦人。

有没有CSS可以让div变成圆形，我可以指定半径?

451949 次浏览
小开

使用多个(20+)水平或垂直1px div来构建一个圆也是个坏主意。这个jQuery插件使用这个方法来构造不同的形状。

小开

你可以使用radius，但它在IE: border-radius: 5px 5px;上不起作用。

小开

这实际上是可能的。

看到:CSS技巧:如何制作没有图像的圆圈。看到演示。

但是要注意，它在兼容性方面有严重的缺点，基本上，你让猫叫了。

看到它起作用了 在这里

正如你将看到的，你只需要将height和width设置为border-radius的一半

好运！

小开
最佳答案

下面是一个演示: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派。我上面的演示不能在IE8中工作，但这只是因为jsFiddle没有托管PIE.htc。

我的演示是这样的:

小开

试试这个

.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;
}
小开

将元素每边的边框半径设置为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>
小开
根据大小给出宽度和高度，但保持两者相等 
.circle {
background-color: gray;
height: 400px;
width: 400px;
border-radius: 100%;
}
<div class="circle">
</div>

小开 

.fa-circle{
color: tomato;
}


div{
font-size: 100px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div><i class="fa fa-circle" aria-hidden="true"></i></div>

只是想提到另一个解决方案，回答“更容易的方法创建圆div比使用图像?”这是使用FontAwesome。

你导入fontawesome css文件或从CDN 在这里

然后你就:

<div><i class="fa fa-circle" aria-hidden="true"></i></div>

你可以给它任意颜色任意字体大小。

小开

你可以尝试radial-gradient 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>
小开

添加的css属性:

border-radius: 50%;

对任何div都是圆形的。

小开
对于圆形，创建一个div元素，然后输入width = 2倍的边界半径= 2倍的填充。同样line-height = 0 例如，用50px作为圆的半径，下面的代码工作得很好:

width: 100px;
padding: 50px 0;
border: solid;
line-height: 0px;
border-radius: 50px;
小开

假设你有这样的图像:

要做出一个圆，你只需要加

.circle {
border-radius: 50%;
width: 100px;
height: 100px;
}

如果你有一个div，你可以做同样的事情。

请看下面的例子:

.circle {
border-radius: 50%;
width: 100px;
height: 100px;
animation: stackoverflow-example infinite 20s linear;
pointer-events: none;
}


@keyframes stackoverflow-example {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div>
<img class="circle" src="https://www.sitepoint.com/wp-content/themes/sitepoint/assets/images/icon.javascript.png">
</div>

小开 

.circle {
height: 20rem;
width: 20rem;
border-radius: 50%;
background-color: #EF6A6A;
}
<div class="circle"></div>

小开

我有4个解决方案来完成这个任务:

  1. 这个特性
  2. clip-path
  3. 伪元素
  4. 径向渐变

#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>


提交答案