如何在 HTML 中显示单元格表中由一种颜色填充的圆圈？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16754090/
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
How to show in HTML a circle filled by one color within a cell table?
提问by Alex
I need to show a circle filled by one color within a table cell. Somehow, I found an example that works but does not work reliably. Please, see the code below.
On IE the circle becomes a vertically elongated oval. The same can happen on Mozilla with bigger cell height.
我需要在表格单元格中显示一个由一种颜色填充的圆圈。不知何故，我发现了一个有效但不可靠的例子。请看下面的代码。
在 IE 上，圆圈变成垂直拉长的椭圆。同样的情况也可能发生在具有更大单元高度的 Mozilla 上。
<!DOCTYPE HTML>
<html>
<head>
<title>circle</title>
<style type="text/css">
.circle_green {
width:1%;
padding:10px 11px;
margin:0 auto;
border:2px solid #a1a1a1;
border-radius:25px;
background-color:green;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
<div class="circle_green"></div>
</td>
</tr>
</table>
</body>
</html>
回答by Sachin
Use border-radius:100%instead of border-radius: 25px;in your css.
在你的 css 中使用border-radius:100%而不是border-radius: 25px;。
and remove the unused <img />tag from the markup.
并<img />从标记中删除未使用的标签。
You are using border-radius here so make sure your browser supports CSS3 Specifications.
您在此处使用了 border-radius，因此请确保您的浏览器支持 CSS3 规范。
回答by Sachin1392
This worked for me:
这对我有用：
CSS
CSS
.filled-circle {
padding: 2px 11px;
border-radius: 100%;
background-color: #f38e23;
}
HTML
HTML
<span class="filled-circle"></span>
回答by Ron van der Heijden
You also could create a SVG (Scalable Vector Object) to do this.
您还可以创建一个 SVG（可缩放矢量对象）来执行此操作。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="41" cy="41" r="40" stroke="#333" stroke-width="1" fill="#800000"/>
</svg>
回答by Touhid Rahman
Use same width, height and border-radius. Example:
使用相同的宽度、高度和边框半径。例子：
width:25px;
height:25px;
border-radius:25px;
