Html 比使用图像更容易创建圆形 div 的方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4840736/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Easier way to create circle div than using an image?
提问by bmaster
I'm wondering if there's an easier way to create circular divs than what I'm doing now.
我想知道是否有比我现在正在做的更简单的方法来创建圆形 div。
Currently, I am just making an image for each different size, but it's annoying to do this.
目前，我只是为每个不同的尺寸制作图像，但这样做很烦人。
Is there anyway using CSS to make divs which are circular and I can specify the radius?
无论如何使用CSS来制作圆形的div并且我可以指定半径？
回答by thirtydot
Here's a demo: http://jsfiddle.net/thirtydot/JJytE/1170/
这是一个演示：http: //jsfiddle.net/thirtydot/JJytE/1170/
CSS:
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:
HTML：
<div class="circleBase type1"></div>
<div class="circleBase type2"></div><div class="circleBase type2"></div>
<div class="circleBase type3"></div>
To make this work in IE8 and older, you must download and use CSS3 PIE. My demo above won't work in IE8, but that's only because jsFiddle doesn't host PIE.htc.
要在IE8 及更早版本中使用此功能，您必须下载并使用CSS3 PIE。我上面的演示在 IE8 中不起作用，但这只是因为 jsFiddle 没有托管PIE.htc.
My demo looks like this:
我的演示看起来像这样：
回答by Tamik Soziev
Setting the border-radius of each side of an element to 50% will create the circle display at any size:
将元素每一边的 border-radius 设置为 50% 将创建任意大小的圆形显示：
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
/* width and height can be anything, as long as they're equal */
}
回答by iSafa
Try this
尝试这个
.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;
}
回答by Trufa
It is actually possible.
这实际上是可能的。
See: CSS Tip: How to Make Circles Without Images. See demo.
请参阅：CSS 提示：如何制作没有图像的圆圈。见演示。
But be warned, It has serious disadvantages in terms of compatibility basically, you are making a cat bark.
但请注意，它基本上在兼容性方面有严重的缺点，你在制造猫吠。
See it workinghere
看到它在这里工作
As you will see you just have to set up the heightand widthto half the border-radius
正如你将看到你就必须要建立height和width的一半border-radius
Good luck!
祝你好运！
回答by kelloti
There's also [the bad idea of] using several (20+) horizontal or vertical 1px divs to construct a circle. This jQuery pluginuses this method to construct different shapes.
还有 [坏主意] 使用几个 (20+) 水平或垂直 1px div 来构建一个圆。这个 jQuery 插件使用这种方法来构造不同的形状。
回答by vinayak hegde
Give width and height depending on the size but,keep both equal
根据大小给出宽度和高度，但保持相等
.circle {
background-color: gray;
height: 400px;
width: 400px;
border-radius: 100%;
}<div class="circle">
</div>回答by user3494047
.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>Just wanted to mention another solution which answers the question of "Easier way to create circle div than using an image?" which is to use FontAwesome.
只是想提一下另一个解决方案，它回答了“比使用图像更容易创建圆形 div 的方法？”的问题。这是使用FontAwesome。
You import the fontawesome css file or from the CDN here
您在这里导入 fontawesome css 文件或从 CDN
and then you just:
然后你只需：
<div><i class="fa fa-circle" aria-hidden="true"></i></div>
and you can give it any color you want any font size.
你可以给它任何你想要的任何字体大小的颜色。
回答by Er M. K. Gupta
You can try the radial-gradientCSS function:
你可以试试radial-gradientCSS 函数：
.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+ */
}
Apply it to a divlayer:
将其应用于div图层：
<div class="circle"></div>
回答by Abraham Hernandez
Let's say you have this image:
假设你有这张图片：
to make a circle out of this you only need to add
要从中制作一个圆圈，您只需要添加
.circle {
border-radius: 50%;
width: 100px;
height: 100px;
}
So if you have a div you can do the same thing.
所以如果你有一个 div 你可以做同样的事情。
Check the example below:
检查下面的例子：
.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>回答by Druhin
.circle {
height: 20rem;
width: 20rem;
border-radius: 50%;
background-color: #EF6A6A;
}<div class="circle"></div>