1

我需要在表格单元格中显示一个由一种颜色填充的圆圈。不知何故，我找到了一个有效但不能可靠工作的示例。请看下面的代码。
在 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>
4

4 回答 4

9

在你的 CSS 中使用border-radius:100%而不是。border-radius: 25px;

<img />并从标记中删除未使用的标签。

您在此处使用边框半径，因此请确保您的浏览器支持 CSS3 规范。

JS 小提琴演示

于 2013-05-25T21:35:27.350 回答
3

您还可以创建一个 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>
于 2013-05-25T21:51:23.103 回答
3

这对我有用：

CSS

.filled-circle {
  padding: 2px 11px;
  border-radius: 100%;
  background-color: #f38e23;
}

HTML

<span class="filled-circle"></span>
于 2017-04-05T14:45:27.927 回答
0

使用相同的宽度、高度和边框半径。例子：

        width:25px;
        height:25px;
        border-radius:25px;
于 2013-05-25T22:30:00.410 回答