创建圆形 div 比使用图像更简单的方法？答案

【问题标题】：Easier way to create circle div than using an image?创建圆形 div 比使用图像更简单的方法？
【发布时间】：2011-06-17 23:09:21
【问题描述】：

我想知道是否有比我现在做的更简单的方法来创建圆形 div。

目前，我只是为每种不同尺寸制作一张图片，但这样做很烦人。

有没有使用 CSS 来制作圆形的 div 并且我可以指定半径？

【问题讨论】：

必须支持哪些浏览器？
看看我对这个相关问题的回答，尤其是演示：stackoverflow.com/questions/4451350/…
你也可以用SVG(VML)来做一个圆。
为什么不能调整图片的宽度和高度，而不是制作不同的尺寸？这些图片有多大？

标签： html css geometry css-shapes

【解决方案1】：

我有 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>

【讨论】：

【解决方案2】：

.circle {
	height: 20rem;
	width: 20rem;
	border-radius: 50%;
	background-color: #EF6A6A;
}

&lt;div class="circle"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

假设你有这张图片：

你只需要添加一个圆圈就可以了

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

【讨论】：

【解决方案4】：

对于圆形，创建一个 div 元素，然后输入宽度 = 2 倍的边框半径 = 2 倍的内边距。线高 = 0 例如，以 50px 作为圆的半径，下面的代码运行良好：

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

【讨论】：

【解决方案5】：

添加css 属性：

border-radius: 50%;

到任何 div 使其循环。

【讨论】：

【解决方案6】：

你可以试试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>

【讨论】：

【解决方案7】：

.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 here

然后你就：

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

你可以给它任何你想要任何字体大小的颜色。

【讨论】：

【解决方案8】：

您可以使用radius，但它不适用于IE：border-radius: 5px 5px;。

【讨论】：

【解决方案9】：

根据尺寸给出宽度和高度，但要保持相等

.circle {
  background-color: gray;
  height: 400px;
  width: 400px;
  border-radius: 100%;
}

<div class="circle">
</div>

【讨论】：

border-radius: 50%; 就够了。

【解决方案10】：

基本上，这使用 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>

【讨论】：

这就是我想要的，但这是否可以在面板中显示圆圈列表，保持圆圈之间的适当距离，如此处所示plnkr.co/edit/KgWsnwDbgwiacGeJ7O7i?p=preview

【解决方案11】：

这是一个演示：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 and older 中进行这项工作，您必须下载并使用CSS3 PIE。我上面的演示不能在 IE8 中运行，但这只是因为 jsFiddle 没有托管 PIE.htc。

我的演示如下所示：

【讨论】：

我无法在 chrome 中制作 div 圆形。但它在 Mozilla 中工作。我的 url 是 chokate.maninactionscript.com/chokates 点击沙漠图像或它之前的图像缩放时显示的 div 不是圆形..在 Mozilla 中。
@techie_28：您页面上的div 是圆形的，如果您将border: 5px solid red 添加到其中，您可以看到它。问题是图像中“悬在圆圈上”的部分没有被隐藏。通常的解决方法都不是特别容易在这里应用。我建议使用-webkit-mask-image 属性来修复WebKit 浏览器（并保留border-radius，用于其他浏览器）。更多信息在这里：webkit.org/blog/181/css-masks。你也可以考虑在 Stack Overflow 上提问，看看有没有其他人有其他想法。
你也可以做 100% 而不是 999px。
.htc 不再受支持。
我想知道如何在圆形 div 内对齐对象（如按钮）！ :D

【解决方案12】：

将元素每边的边框半径设置为 50% 将创建任意大小的圆形显示：

.circle {
  border-radius: 50%;
  width: 200px;
  height: 200px; 
  /* width and height can be anything, as long as they're equal */
}

【讨论】：

这大概是现在（2017年）应该使用的方法。

【解决方案13】：

试试这个

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

【讨论】：

【解决方案14】：

其实是可以的。

请参阅：CSS Tip: How to Make Circles Without Images。见demo。

但请注意，它基本上在兼容性方面有严重的缺点，你正在制造猫吠。

看看效果 here

如您所见，您只需将height 和width 设置为border-radius 的一半

祝你好运！

【讨论】：

您好，感谢您的jsfiddle 链接！此链接是目前唯一可以使用您的答案的链接。 ;)

【解决方案15】：

还有 [坏主意] 使用几个 (20+) 水平或垂直 1px div 来构建一个圆圈。 This jQuery plugin 使用这种方法来构造不同的形状。

【讨论】：